微信小程序scroll-view滑动的时候滑动到指定位置(写定断点之后点击滚动到此位置,无需适配)

<scroll-view scroll-y="true" 
style="white-space: pre-wrap; font-size: 28rpx;padding-top:20rpx;height: 80%;background-color: #F9F9F9;"  
scroll-with-animation  scroll-top="{{scrolltop}}">


<text style="color: #FF0505;" class="b318">
3.1.8.债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷债权债务及民事纠纷。
</text>


</scroll-view>

 <view style="display: flex;margin-top: 20rpx;">
    <button  bindtap="nookfine">不同意</button>
    <button  bindtap="okfine">同意</button>
 </view>
data:{
scrolltop:0,
oneclick:true,
},


nookfine(){
        this.setData({showAgreement:false})
    },


okfine(){
        if(this.data.oneclick){
          this.scrollTo()
          this.setData({oneclick:false})
        }else{
           this.login()
           this.setData({showAgreement:false})
        }
    },

 scrollTo() {
      // 1.使用wx.createSelectorQuery()查询到需要滚动到的元素位置
      wx.createSelectorQuery().select('.b318').boundingClientRect(res => {
             // 2.使用wx.getSysTemInfo()获取设备及页面高度windowHeight(px)
               var num = 0;
                wx.getSystemInfo({
                    success(ress) {
                      wx.pageScrollTo({
                        // 3. 滚动的距离根据设备的页面高度进行微调(px)
                        scrollTop: res.top - ress.windowHeight/2 + 50,
                        duration: 200
                      })
                      num = res.top - ress.windowHeight/2 + 50
                    } 
              })
              this.setData({scrolltop:num})
            }).exec()
    },

这个是点击事件,还有一个是进入页面滑动事件

微信小程序scroll-view滑动的时候滑动到指定位置_scroll-view滚动到指定位置_icoo张某人的博客-CSDN博客

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中,scroll-view 组件默认会阻止页面上其他元素的滑动事件,这可以通过设置 `catchtouchmove` 属性来解决。 具体做法如下: 1. 在 scroll-view 组件上添加 `catchtouchmove="true"` 属性,如下所示: ```html <scroll-view catchtouchmove="true"> <!-- scroll-view 内容 --> </scroll-view> ``` 2. 在页面的 `onLoad` 或 `onReady` 生命周期中,获取 scroll-view 组件的高度和宽度,然后在页面上添加一个与 scroll-view 同样大小的透明的 view,并将其 zIndex 设置为比 scroll-view 更高的数值,这样就可以让页面上的其他元素在透明的 view 上进行滑动了。代码如下: ```javascript onLoad: function () { var that = this; wx.createSelectorQuery().select('#scrollview').boundingClientRect(function (rect) { that.setData({ scrollHeight: rect.height }); }).exec(); wx.getSystemInfo({ success: function (res) { that.setData({ windowHeight: res.windowHeight }); } }); }, ``` ```html <!-- 添加一个与 scroll-view 大小相同的透明 view --> <view class="transparent-view" style="height: {{windowHeight - scrollHeight}}px; z-index: 1;"></view> <scroll-view id="scrollview" catchtouchmove="true"> <!-- scroll-view 内容 --> </scroll-view> ``` 3. 在页面的 CSS 中,让透明的 view 不显示出来,代码如下: ```css .transparent-view { background-color: transparent; } ``` 通过以上步骤,就可以解决微信小程序scroll-view 组件滑动穿透的问题了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值