一文看懂彈出層中使用scroll-view
- 前言
- 一、定義template模板
- 二、解決彈出層的滾動穿透
- 三、定義資料
- 四、相關方法
- 五、簡單樣式
前言
本文使用的相關技術及組件為uniapp+uview，使用hbuilder運行在小程式也同樣生效，
一、定義template模板
<template>
<view :class="change_pop_show ? 'project_data scroll-lock' : 'project_data'">
<u-button type="primary" @click="openPop">打開彈出框</u-button>
<!-- 切換專案彈出層 -->
<u-popup ref="popup" v-model="change_pop_show" width="500rpx" height="600rpx" mode="bottom" border-radius="20">
<view class="project_name_wrapper">
<scroll-view :scroll-into-view="toView" scroll-y="true" style="height: 480rpx;" scroll-with-animation="true">
<view v-for="(item,index) in list" :id="item" class="test">
{{item}}
</view>
</scroll-view>
</view>
<view class="btn_container">
<u-button type="primary" class="btn" @click="addElement">增加元素</u-button>
</view>
</u-popup>
</view>
</template>
scroll-into-view值應為某子元素id（id不能以數字開頭），設定哪個方向可滾動，則在哪個方向滾動到該元素，還需要將scroll-y設為true
在彈出層使用scroll-view就能達到內容超出可以滾動的效果，
二、解決彈出層的滾動穿透
大家可以看到我在最大的view標簽上動態系結一個類scroll-lock，是根據彈出框顯隱控制的，這就是第一個問題，彈出層滾動穿透問題，
在頁面中如果高度過高，出現了滾動條，這時候設定了彈出層，在彈出層內滾動就會造成頁面同時滾動，一般叫做滾動穿透，
解決方法就是在彈出層出現后設定這樣的樣式就可以解決了，(適用于微信小程式)
.scroll-lock{
position: fixed;
top: 0;
left: 0;
z-index: 99;
width: 100%;
height: 100%;
}
三、定義資料
data() {
return {
// 彈出層顯示隱藏
change_pop_show: false,
// 展示的資料
list: ["list0", "list1", "list2","list3","list4","list5","list6","list7"],
// 錨點標記
toView: ''
}
},
四、相關方法
// 打開彈出層
openPop(){
this.change_pop_show = true
},
// 增加元素
addElement(){
// 添加元素
this.list.push('list'+this.list.length)
// uniapp需要設定定時器才能實作自動滑動到最底層的效果，如果是開發小程式則不需要使用定時器
setTimeout(()=>{
this.toView = this.list[this.list.length-1]
},100)
},
五、簡單樣式
.project_data{
width: 100%;
height: 2000rpx;
overflow-x:hidden;
position: relative;
.openPop{
margin-top: 100rpx;
}
.project_name_wrapper{
.test{
height: 60rpx;
background-color: #E06C75;
margin-bottom: 20rpx;
}
.btn_container{
height: 20%;
position: fixed;
bottom: 0;
left: 0;
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/242401.html
標籤：其他
下一篇：HTML+CSS實作小米官網首頁