当画线区域滑出手机屏幕后固定在顶部,如下图:
思路
思路:①给目标标签添加id—>②页面加载完后获取目标到页面顶部y轴的距离(如果小程序是自定义的顶部,此时的y轴距离需要加上顶部的距离)—>③在页面顶部先添加好红色框(通过一个变量进行控制),算出目标—>通过检测页面的滚动距离,是不是已经滑到指定位置。
①给需要隐藏的标签添加 id
<view id="box" class="list-title" wx:if="{{!listtitleshow}}">
<view class="text {{ischeck0?'checkTex':''}}" bindtap="brandInfo">综合</view>
<view class="text active-Title">
<view class="text {{ischeck?'checkTex':''}} {{ params.order=='minprice'?'on':''}}" data-order="minprice"
bindtap="bindSort">
价格
<image src="/images/listsort{{listorder}}.png" class="icon" />
</view>
</view>
<view class="text {{ params.order=='sales'?'on':''}}" data-order="sales" bindtap="bindSort1">
<view class='text {{ischeck1?"checkTex":""}}'>销量
<image src="/images/listsort{{listorder1}}.png" class="icon" />
</view>
</view>
</view>
②页面加载完后获取目标到页面顶部y轴的距离
onReady: function () {
var that = this;
var query = wx.createSelectorQuery()
query.select('#box').boundingClientRect(function (res) {
console.log("scrollTop1 ", res)
console.log("app.globalData.navHeight ", app.globalData.navHeight)
that.setData({
scrollTop1: res.top - parseInt(app.globalData.navHeight / 2.01) //根据实际需求加减值
})
}).exec()
},
③在页面顶部先添加好红色框,通过一个变量控制显示
<view class="list-title list-title1 " style="top:{{navH}}rpx;" wx:if="{{listtitleshow}}">
<view class="text {{ischeck0?'checkTex':''}}" bindtap="brandInfo">综合</view>
<view class="text active-Title">
<view class="text {{ischeck?'checkTex':''}} {{ params.order=='minprice'?'on':''}}" data-order="minprice"
bindtap="bindSort">
价格
<image src="/images/listsort{{listorder}}.png" class="icon" />
</view>
</view>
<view class="text {{ params.order=='sales'?'on':''}}" data-order="sales" bindtap="bindSort1">
<view class='text {{ischeck1?"checkTex":""}}'>销量
<image src="/images/listsort{{listorder1}}.png" class="icon" />
</view>
</view>
</view>
通过检测页面的滚动距离,是不是已经滑到指定位置。
onPageScroll: function (e) {
// console.log("滚动距离", e.scrollTop)
// console.log("this.data.scrollTop1", this.data.scrollTop1)
if (e.scrollTop > this.data.scrollTop1) {
this.setData({
listtitleshow: true
})
} else {
this.setData({
listtitleshow: false
})
}
},
解决scroll 滑动卡顿
wx:if="{{listtitleshow}}" 顶部
wx:if="{{!listtitleshow}}" 页面上的