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

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í)也類(lèi)似。這個(gè)也是 scroll-view 最簡(jiǎn)單的用法，縱向滾動(dòng)直接設(shè)置一個(gè)已知的固定高度 height 就行了，沒(méi)啥難度。

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

常見(jiàn)整個(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 我是沒(méi)找到實(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) {
          // 感覺(jué)獲取到的 res.height 和實(shí)際的有大約 39px 誤差，所以自己減去一點(diǎn)
          height=(h > 19) ? (h - 19) : h
        }

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

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

天給大家?guī)?lái)的內(nèi)容是一款非常時(shí)尚的純CSS3炫酷手機(jī)APP滑動(dòng)菜單動(dòng)畫(huà)特效。
當(dāng)鼠標(biāo)移動(dòng)到手機(jī)界面上的時(shí)候，菜單中的小圖標(biāo)會(huì)逐個(gè)滑動(dòng)顯示出來(lái)。而當(dāng)鼠標(biāo)移動(dòng)到菜單區(qū)域會(huì)出現(xiàn)一個(gè)非常酷的半圓形擴(kuò)展動(dòng)畫(huà)，同時(shí)菜單文字將逐一展現(xiàn)出來(lái)。
具體效果如下圖：

簡(jiǎn)單教程

HTML結(jié)構(gòu)部分：手機(jī)界面滑動(dòng)菜單動(dòng)畫(huà)特效的主要部分是菜單圖標(biāo)和菜單項(xiàng)的展示。這里使用一個(gè)嵌套<div>結(jié)構(gòu)，菜單項(xiàng)中有超鏈接<a>元素來(lái)制作。

CSS樣式部分：

開(kāi)始的時(shí)候，菜單使用 right：﹣10px；隱藏起來(lái)。

當(dāng)鼠標(biāo)滑過(guò)的時(shí)候在將這個(gè)菜單列表再移回到屏幕當(dāng)中。

每個(gè)菜單項(xiàng)都要通過(guò)nth﹣child旋轉(zhuǎn)器來(lái)選擇然后添加延遲時(shí)間。

至于半透明的遮罩層則使用social元素的：after偽元素來(lái)制作。

當(dāng)鼠標(biāo)滑過(guò)屏幕上方的header元素時(shí)將移動(dòng)它的left屬性，制作最后的效果。

今天的內(nèi)容就分享到這里，更多內(nèi)容敬請(qǐng)期待！

在線咨詢(xún)

上一篇：一步步帶你實(shí)現(xiàn)web全景看房-three.js
下一篇：JS中事件冒泡，事件捕獲詳解

您的項(xiàng)目需求

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

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