uniapp中scroll-view局部滾動(dòng)的各種場(chǎng)景

ni 文檔中 scroll-view 說(shuō)明

可滾動(dòng)視圖區(qū)域，用于區(qū)域滾動(dòng)。使用豎向滾動(dòng)時(shí)，需要給 scroll-view 一個(gè)固定高度，通過(guò) css 設(shè)置 height；使用橫向滾動(dòng)時(shí)，需要給 scroll-view 添加 white-space: nowrap; 樣式。

微信小程序文檔中 scroll-view 說(shuō)明

可滾動(dòng)視圖區(qū)域。使用豎向滾動(dòng)時(shí)，需要給scroll-view一個(gè)固定高度，通過(guò) WXSS 設(shè)置 height。組件屬性的長(zhǎng)度單位默認(rèn)為px，2.4.0起支持傳入單位(rpx/px)。

場(chǎng)景一：布局中已知高度局部滾動(dòng)

一般頁(yè)面布局中某個(gè)模塊需要局部滾動(dòng)，以橫向滾動(dòng)更多，縱向滾動(dòng)其實(shí)也類似。這個(gè)也是 scroll-view 最簡(jiǎn)單的用法，縱向滾動(dòng)直接設(shè)置一個(gè)已知的固定高度 height 就行了，沒啥難度。

場(chǎng)景二：整個(gè)布局上、中、下3個(gè)模塊布局，中間局部滾動(dòng)

常見整個(gè)頁(yè)面布局，需要中間部分直接自適應(yīng)屏幕然后局部滾動(dòng)。這個(gè)實(shí)現(xiàn)稍微難一點(diǎn)：

js 實(shí)現(xiàn)：直接獲取到屏幕的整個(gè)高度，然后減去上下模塊的高度就是中間的 scroll-view 高度了。

// 獲取屏幕可用高度
let screenHeight = uni.getSystemInfoSync().windowHeight

css 實(shí)現(xiàn)：外層盒子直接 flex 布局，主軸改為 column 縱向，然后中間部分在 scroll-view 標(biāo)簽外面再套一個(gè)div，這個(gè)div 的 flex 設(shè)為 1 自動(dòng)設(shè)置高度，然后 scroll-view 的 height 設(shè)為 100%。不過(guò)注意最外層的盒子一定要是已知高度的，像整個(gè)頁(yè)面這種其實(shí)也是已知高度，否則無(wú)效。

<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>

場(chǎng)景三：未知高度局部滾動(dòng)

這個(gè)就有點(diǎn)難度了，其實(shí)就是我們 pc 上常用的設(shè)置最大高度 max-height，如果超過(guò)了最大高度則出現(xiàn)滾動(dòng)條，很不幸在小程序這種方式滾動(dòng)不了。

一般用在彈窗中比較多，設(shè)置一個(gè)固定高度確實(shí)可以實(shí)現(xiàn)，但是內(nèi)容較少時(shí)會(huì)出現(xiàn)大量留白，用純 css 我是沒找到實(shí)現(xiàn)方式，因?yàn)樾枰獎(jiǎng)討B(tài)獲取到內(nèi)容的高度才知道要給 scroll-view 設(shè)置多高。

<template>
  <div class="pop">
    <div class="header">我是標(biāo)題</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 // 默認(rèn)滾動(dòng)高度
    }
  },
  mounted() {
    // 實(shí)際彈窗中應(yīng)該是在彈窗顯示時(shí)去計(jì)算高度，此處僅作示例，獲取不到節(jié)點(diǎn)信息可以放到 $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 和實(shí)際的有大約 39px 誤差，所以自己減去一點(diǎn)
          height = (h > 19) ? (h - 19) : h
        }

        this.height = height
      }).exec()
    }
  }
}
</script>

注意 createSelectorQuery 在自定義組件中要加上 in(this)

者 | 大澈

大家好，我是大澈！

又是好久沒更文了，前陣子駕著新車回了趟老家，很“幸運(yùn)”的經(jīng)歷了平原縣地震的余波。

回想當(dāng)時(shí)，半夜凌晨，房屋晃動(dòng)，如同身處過(guò)山車，一切都很不真實(shí)。雖然震感時(shí)間很短暫，但是現(xiàn)在依舊讓我記憶猶新，人類在大自然面前真的是太渺小了，很多時(shí)候真的是力不從心。

所以，真心想和大家說(shuō)一句，生活不易，及時(shí)行樂(lè)，珍惜身邊人，且行且珍惜。

ONE

需求分析，問(wèn)題描述

一、需求

一個(gè)可以滾動(dòng)的菜單，為它添加一個(gè)可以下拉滾動(dòng)的提示。要求滾動(dòng)到菜單最底部時(shí)，隱藏下拉滾動(dòng)的提示，否則讓其一直顯示。

二、問(wèn)題

1、如何實(shí)現(xiàn)滾動(dòng)條效果？

2、如何判斷是否滾動(dòng)到底部？

TWO

解決問(wèn)題，答案速覽

實(shí)現(xiàn)代碼如下，復(fù)制粘貼即可直接使用。

代碼中滾動(dòng)條的實(shí)現(xiàn)使用了element的el-scrollbar組件。組件中包裹的第一個(gè)div，指的是需要滾動(dòng)的視圖。組件中包裹的第二個(gè)div，指的是下拉滾動(dòng)提示的圖標(biāo)，這里根據(jù)需求進(jìn)行設(shè)置，可以更換靜態(tài)的或者那種閃爍跳躍的動(dòng)態(tài)提示圖標(biāo)。

// 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、邏輯
// 滾動(dòng)條事件
const handleScroll = (val) => {
// 防止Scrollbar實(shí)例為空
if (!myScrollbar.value) {
return
}

// 判斷是否滾動(dòng)到底部
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) {
// 滾動(dòng)到底部的處理邏輯
isShowIcon.value = false
} else {
// 非滾動(dòng)到底部的處理邏輯
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

問(wèn)題解析，知識(shí)總結(jié)

一、如何實(shí)現(xiàn)滾動(dòng)條效果？

實(shí)現(xiàn)滾動(dòng)條效果有兩種實(shí)現(xiàn)方式：利用css的overflow: scroll屬性、利用element的el-scrollbar組件。

1、overflow: scroll屬性

在div元素上添加 overflow-y: scroll; css屬性，就能顯示出一個(gè)滾動(dòng)條，如果不指定是x或y軸，則水平和垂直都會(huì)出現(xiàn)滾動(dòng)條。

當(dāng)然，前提是你需要指定div元素的高度或者最大高度。

2、el-scrollbar組件

一般在vue項(xiàng)目中，我們可直接使用element的el-scrollbar組件，因?yàn)楣俜綖槲覀兲峁┝嗽S多API，以及各種適配優(yōu)化。

el-scrollbar組件的屬性如下：

el-scrollbar組件的事件如下：

el-scrollbar組件的實(shí)例屬性如下：

二、如何判斷是否滾動(dòng)到底部？

這里判斷是否滾動(dòng)到底部的關(guān)鍵在于scrollTop+clientHeight是否等于scrollHeight的值。只有當(dāng)滾動(dòng)的距離+可視區(qū)域的高度，與scrollHeight相等時(shí)，才證明滾動(dòng)條滾動(dòng)到了底部。

同樣的，如果scrollHeight與可視區(qū)域的高度直接就相等時(shí)，又說(shuō)明元素不可以滾動(dòng)，也就沒有滾動(dòng)條。這一點(diǎn)在有此需求時(shí)，可以進(jìn)行實(shí)用。

元素的幾個(gè)寬高屬性釋義如下：

- END -

題：

橫向滾動(dòng)條不顯示；el-table 只有豎向滾動(dòng)條拉到最底部時(shí)，才顯示橫向滾動(dòng)條；

要達(dá)到效果：

不用豎向滾動(dòng)條到底部，即可實(shí)現(xiàn)橫向條顯示；

主要設(shè)置：

設(shè)置el-table 外層css
設(shè)置el-table css

具體實(shí)現(xiàn)：

<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>

export default {

components: {},

data () {

return {

tableData: [{

date: '2016-05-02',

address: '上海市普陀區(qū)金沙江路 1518 弄'

}, {

date: '2016-05-04',

address: '上海市普陀區(qū)金沙江路 1517 弄'

}, {

date: '2016-05-01',

address: '上海市普陀區(qū)金沙江路 1519 弄'

}, {

date: '2016-05-03',

address: '上海市普陀區(qū)金沙江路 1516 弄'

{

date: '2016-05-04',

address: '上海市普陀區(qū)金沙江路 1517 弄'

}, {

date: '2016-05-01',

address: '上海市普陀區(qū)金沙江路 1519 弄'

}, {

date: '2016-05-03',

address: '上海市普陀區(qū)金沙江路 1516 弄'

{

date: '2016-05-04',

address: '上海市普陀區(qū)金沙江路 1517 弄'

}, {

date: '2016-05-01',

address: '上海市普陀區(qū)金沙江路 1519 弄'

}, {

date: '2016-05-03',

address: '上海市普陀區(qū)金沙江路 1516 弄'

]

};

computed: {},

watch: {},

created () {

mounted () {

methods: {

}

</script>

</style>

如上設(shè)置即可實(shí)現(xiàn)所需效果；

在線咨詢

上一篇：Jest直通車- react表單上傳
下一篇：「每日一學(xué)」前端魔法王國(guó)：HTML與CSS奇跡創(chuàng)造者的冒險(xiǎn)之旅

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

uniapp中scroll-view局部滾動(dòng)的各種場(chǎng)景

ni 文檔中 scroll-view 說(shuō)明

微信小程序文檔中 scroll-view 說(shuō)明

場(chǎng)景一：布局中已知高度局部滾動(dòng)

場(chǎng)景二：整個(gè)布局上、中、下3個(gè)模塊布局，中間局部滾動(dòng)

場(chǎng)景三：未知高度局部滾動(dòng)

您的項(xiàng)目需求

場(chǎng)景二：整個(gè)布局上、中、下3個(gè)模塊布局，中間局部滾動(dòng)