整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
可滾動視圖區域，用于區域滾動。使用豎向滾動時，需要給 scroll-view 一個固定高度，通過 css 設置 height；使用橫向滾動時，需要給 scroll-view 添加 white-space: nowrap; 樣式。
可滾動視圖區域。使用豎向滾動時，需要給scroll-view一個固定高度，通過 WXSS 設置 height。組件屬性的長度單位默認為px，2.4.0起支持傳入單位(rpx/px)。
一般頁面布局中某個模塊需要局部滾動，以橫向滾動更多，縱向滾動其實也類似。這個也是 scroll-view 最簡單的用法，縱向滾動直接設置一個已知的固定高度 height 就行了，沒啥難度。
常見整個頁面布局，需要中間部分直接自適應屏幕然后局部滾動。這個實現稍微難一點：
// 獲取屏幕可用高度
let screenHeight = uni.getSystemInfoSync().windowHeight<template>
<div class="page">
<div class="top" />
<div class="center">
<scroll-view style="height: 100%;"></scroll-view>
</div>
<div class="bottom" />
</div>
<template>
<style>
.page {
display: flex;
flex-direction: column;
}
.top {
height: 100px;
background: green;
}
.bottom {
height: 100px;
background: red;
}
.center {
flex: 1;
}
</style>這個就有點難度了，其實就是我們 pc 上常用的設置最大高度 max-height，如果超過了最大高度則出現滾動條，很不幸在小程序這種方式滾動不了。
一般用在彈窗中比較多，設置一個固定高度確實可以實現，但是內容較少時會出現大量留白，用純 css 我是沒找到實現方式，因為需要動態獲取到內容的高度才知道要給 scroll-view 設置多高。
<template>
<div class="pop">
<div class="header">我是標題</div>
<scroll-view :style="'height:' + height + 'px'">
<div id="scroll-content"></div>
</scroll-view>
<div class="footer">確定</div>
</div>
<template>
<script>
export default {
data() {
return {
height: 200 // 默認滾動高度
}
},
mounted() {
// 實際彈窗中應該是在彈窗顯示時去計算高度，此處僅作示例，獲取不到節點信息可以放到 $nextTick 中去獲取
this.calcHeight()
},
methods: {
calcHeight() {
const query = uni.createSelectorQuery().in(this)
query.select('#scroll-content').boundingClientRect(res => {
const h = res ? res.height : 0
let height = this.height
if (h > 0 && h <= this.height) {
// 感覺獲取到的 res.height 和實際的有大約 39px 誤差，所以自己減去一點
height = (h > 19) ? (h - 19) : h
}
this.height = height
}).exec()
}
}
}
</script>注意 createSelectorQuery 在自定義組件中要加上 in(this)
者 | 大澈
大家好，我是大澈！
又是好久沒更文了，前陣子駕著新車回了趟老家，很“幸運”的經歷了平原縣地震的余波。
回想當時，半夜凌晨，房屋晃動，如同身處過山車，一切都很不真實。雖然震感時間很短暫，但是現在依舊讓我記憶猶新，人類在大自然面前真的是太渺小了，很多時候真的是力不從心。
所以，真心想和大家說一句，生活不易，及時行樂，珍惜身邊人，且行且珍惜。
ONE
需求分析，問題描述
一、需求
一個可以滾動的菜單，為它添加一個可以下拉滾動的提示。要求滾動到菜單最底部時，隱藏下拉滾動的提示，否則讓其一直顯示。
二、問題
1、如何實現滾動條效果？
2、如何判斷是否滾動到底部？
TWO
解決問題，答案速覽
實現代碼如下，復制粘貼即可直接使用。
代碼中滾動條的實現使用了element的el-scrollbar組件。組件中包裹的第一個div，指的是需要滾動的視圖。組件中包裹的第二個div，指的是下拉滾動提示的圖標，這里根據需求進行設置，可以更換靜態的或者那種閃爍跳躍的動態提示圖標。
// 1、模版
<el-scrollbar max-height="calc(100vh - 84px)" @scroll="handleScroll" ref="myScrollbar">
<div class="sideBarIn"></div>
<div class="pcSign pcIcon" v-if="isShowIcon">
<img class="iconImg" src="../assets/images/common/xiaGery.png"></div>
</el-scrollbar>
// 2、邏輯
// 滾動條事件
const handleScroll = (val) => {
// 防止Scrollbar實例為空
if (!myScrollbar.value) {
return
}
// 判斷是否滾動到底部
let isScrollToEnd = Number(myScrollbar.value.wrapRef.scrollTop.toFixed(0))
+ Number(myScrollbar.value.wrapRef.clientHeight.toFixed(0))
=== Number(myScrollbar.value.wrapRef.scrollHeight.toFixed(0));
if (isScrollToEnd) {
// 滾動到底部的處理邏輯
isShowIcon.value = false
} else {
// 非滾動到底部的處理邏輯
isShowIcon.value = true
}
}
// 3、樣式
.pcIcon {
width:100%;
height: 100px;
position: absolute;
bottom: -4px;
left: 0;
text-align: center;
line-height: 130px;
background: linear-gradient(to bottom, rgba(234, 234, 234, 0.5), rgba(234, 234, 234, 1));
.iconImg {
width: 20px;
height: 20px;
}
}
.pcSign{
display: block;
}THREE
問題解析，知識總結
一、如何實現滾動條效果？
實現滾動條效果有兩種實現方式：利用css的overflow: scroll屬性、利用element的el-scrollbar組件。
1、overflow: scroll屬性
在div元素上添加 overflow-y: scroll; css屬性，就能顯示出一個滾動條，如果不指定是x或y軸，則水平和垂直都會出現滾動條。
當然，前提是你需要指定div元素的高度或者最大高度。
2、el-scrollbar組件
一般在vue項目中，我們可直接使用element的el-scrollbar組件，因為官方為我們提供了許多API，以及各種適配優化。
el-scrollbar組件的屬性如下：
el-scrollbar組件的事件如下：
el-scrollbar組件的實例屬性如下：
二、如何判斷是否滾動到底部？
這里判斷是否滾動到底部的關鍵在于scrollTop+clientHeight是否等于scrollHeight的值。只有當滾動的距離+可視區域的高度，與scrollHeight相等時，才證明滾動條滾動到了底部。
同樣的，如果scrollHeight與可視區域的高度直接就相等時，又說明元素不可以滾動，也就沒有滾動條。這一點在有此需求時，可以進行實用。
元素的幾個寬高屬性釋義如下：
- END -
題：
橫向滾動條不顯示；el-table 只有豎向滾動條拉到最底部時，才顯示橫向滾動條；
要達到效果：
不用豎向滾動條到底部，即可實現橫向條顯示；
主要設置：
具體實現：
<template>
<div >
<el-row style="height: 300px;width: 800px;">
<el-table :data="tableData" style="width:100%" :height="400">
<el-table-column prop="date" label="日期" width="100" fixed>
</el-table-column>
<el-table-column prop="name" label="姓名" width="100">
</el-table-column>
<el-table-column prop="address" label="地址" width="100">
</el-table-column>
<el-table-column prop="date" label="日期" width="100">
</el-table-column>
<el-table-column prop="name" label="姓名" width="300">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column prop="date" label="日期">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column prop="name" label="姓名" width="100" fixed="right">
</el-table-column>
</el-table>
</el-row>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1516 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1516 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1516 弄'
},
]
};
},
computed: {},
watch: {},
created () {
},
mounted () {
},
methods: {
},
}
</script>
<style >
</style>
如上設置即可實現所需效果；
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
