小程序-处理scroll-view组件的高度问题
目录
小程序 - 处理scroll-view组件的高度问题
在最近的小程序开发项目中有用到scroll-view组件，比较难搞定的是其高度问题，因其scroll-view自带一个高度，且需有高度才能有滑动效果；
1、js 计算高度；
<scroll-view style='height:{{scrollHeight}}px' class='scrollStyle' scroll-y='true' bindscrolltolower="loadMoreData" lower-threshold="">
js:
onLoad() {
let scrollHeight = wx.getSystemInfoSync().windowHeight;
this.setData({
scrollHeight: scrollHeight
})
}scrollHeight 需要减掉页面中其他元素的高度，其实有点麻烦的；
调用wx.getSystemInfoSync()方法来获取视口的高度；
2、调用 display: flex; 方法
元素设置 flex: 1， scroll-view 高度设置 100%；
在flex布局下， absolute 和 fiexd 的盒子会失效 ，相对定位除外；
<view class="g-top-banner form-box">
//navigator带id ，path 可跳转到指定的小程序页面
<navigator path="/pages/membercard/detail/index?alias=Y2ody7zfbm9gyh&kdt_id=13284105" target="miniProgram" open-type="navigate" app-id="" class='btn'>小程序</navigator>
<image mode="widthFix" src="/images/"></image>
</view>
<view class="g-container-box">
//左盒子
<view class="m-item-left">
<view class="item-list">
<image mode="widthFix" src="/images/"></image>
<view class="text"><label>龙米<label>稻花香系列<view>
</view>
<view class="item-list">
<image mode="widthFix" src="/images/"></image>
<view class="text"><label>龙米<label>家家香系列<view>
</view>
<view class="item-list">
<image mode="widthFix" src="/images/"></image>
<view class="text">下饭神器<view>
</view>
<view>
// 右盒子
<view class="m-item-right">
<scroll-view scroll-y="true" bindscrolltolower="lower" class="scroll-view">
<repeat for='{{list}}' key="index" item="item">
<image mode="widthFix" src="{{item.img}}"></image>
</repeat>
</scroll-view>
<view>
</view>page {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
.g-top-banner {
flex: 1;
height: 100rpx; //这个高度比较重要，是在page中所占高度比，会影响 g-container-box 最后的高度或可视区域
}
.g-container-box {
flex: 1;
height: 100rpx; // 默认高度
}
.scroll-view {
height: 100%;
}
::-webkit-scrollbar {
width: 0; //清除滚动轴
height: 0;
color: transparent;
}3、absolute 绝对定位获得高度：
1)、scroll-view 可以利用 scroll-into-view 制作类似于锚点的效果 ，通过 toView 拿到id值 进行跳转，这个id可以是动态的，但不能为纯数字；
2)、 bindscroll - 滚动时触发 ； bindscrolltoupper - 滚动到顶部触发；- scroll-view组件自带
3)、可以多尝试将动态的文字 和图片一样 都写在data里面，方便管理；
4)、scroll-view 在商品很少的时候，向上滑动时会很快，没有高度，其实可以写一个最小高度撑开距离；
<view class="g-list-box">
<view class="location">
// hidden='{{show}}' srcollFun 控制向上滑动时隐藏的效果
<view class="location-hd" hidden='{{show}}'>
<view class="g-top-banner form-box">
//navigator带id ，path 可跳转到指定的小程序页面
<navigator path="/pages/membercard/detail/index?alias=Y2ody7zfbm9gyh&kdt_id=13284105" target="miniProgram" open-type="navigate" app-id="" class='btn'>小程序</navigator>
<image mode="widthFix" src="/images/"></image>
</view>
</view>
<view class="location-ft {{show ? 'topHide' : 'topShow'}}">
<view class="g-container-box">
//左盒子
<view class="m-item-left">
// 切换判断
<view class="item-list {{status == '0' ? 'active' : ''}}" @tap='findShopProducts' data-index='0' data-id='v{{0}}'>
<image mode="widthFix" src="/images/"></image>
<view class="text"><label>龙米<label>稻花香系列<view>
</view>
<view class="item-list {{status == '1' ? 'active' : ''}}" @tap='findShopProducts' data-index='1' data-id='v{{1}}'>
<image mode="widthFix" src="/images/"></image>
<view class="text"><label>龙米<label>家家香系列<view>
</view>
<view class="item-list {{status == '2' ? 'active' : ''}}" @tap='findShopProducts' data-index='2' data-id='v{{2}}'>
<image mode="widthFix" src="/images/"></image>
<view class="text">下饭神器<view>
</view>
<view>
// 右盒子
<view class="m-item-right">
// toView 拿到id，但不能为纯数字
<scroll-view scroll-y="true" scroll-into-view="{{toView}}" class="scroll-view" bindscroll="srcollFun" bindscrolltoupper="upperScroll" >
<repeat for='{{onelist}}' key="index" item="item">
// 判断index索引值是否为0，是则执行 id = v0 ，这个判断id 其实也可以和title 放在一起执行,wx:if并列
<view class='m-img-box' id="v{{index == 0 ? 0 : ''}}">
// wx:if 判断索引值为0/第一个， 则显示
<view class="title" wx:if="{{index == 0}}">稻花香系列</view>
<view class="m-img">
<image mode="widthFix" src="{{item.img}}"></image>
</view>
</view>
</repeat>
// id 为 v1
<repeat for='{{twolist}}' key="index" item="item">
<view class='m-img-box' id="v{{index == 0 ? 1 : ''}}">
<view class="title" wx:if="{{index == 0}}">家家香系列</view>
<view class="m-img">
<image mode="widthFix" src="{{item.img}}"></image>
</view>
</view>
</repeat>
// id 为 v2
<repeat for='{{threelist}}' key="index" item="item">
<view class='m-img-box' id="v{{index == 0 ? 2 : ''}}">
<view class="title" wx:if="{{index == 0}}">下饭神器</view>
<view class="m-img">
<image mode="widthFix" src="{{item.img}}"></image>
</view>
</view>
</repeat>
</scroll-view>
<view>
</view>
</view>
</view>
</view>data= {
// 默认值
show: false,
status: '0',
toView: "",
// 图片
oneList: [
{
pic: 'https://imgcdn.longmiwang.com/update-img/1.png'
},
],
twoList: [
{
pic: 'https://imgcdn.longmiwang.com/update-img/1.png'
},
],
threeList: [
{
pic: 'https://imgcdn.longmiwang.com/update-img/1.png'
},
],
}
methods= {
findShopProducts(e) {
var that = this
//切换
this.status = e.currentTarget.dataset.index
// 获取标签元素上自定义的 data-id 属性的值
this.toView = e.currentTarget.dataset.id
},
upperScroll(e) {
console.log('滑动到顶部');
this.show = false
},
srcollFun(e) {
console.log('滑动');
if (e.detail.scrollTop > 50) {
this.show = true
}
}
}// 布局结构样式
page {
position: relative;
min-height: 100%;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
image {
width: 100%;
height: auto;
}
location-ft.topHide {
top:0rpx;
}
location-ft.topShow {
top:400rpx; // 为了撑开和顶部的距离
}
.g-list-box {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding-botom: 115rpx;
.location {
position: relative;
height: 100%;
.location-ft {
position: absolute;
left: 0;
bottom: 0;
right: 0;
transition: all .3s linear;
.scroll-view {
height: 100%;
}
}
}
}效果
