【微信小程序】小程序之滚动页面到某个地方

版权声明:https://blog.csdn.net/qq_37949737?assign_skin=skin-ink https://blog.csdn.net/qq_37949737/article/details/89919398

这种效果基本上都是在文章详情页面才会出现,用于点击按钮页面滚动到文章的评论位置。但是不排除可以用于别的功能!

首先我们需要用到的是在小程序里面获取某一个元素的位置高度

        var that = this;
        var flag = that.data.flag;    //flag是一个开关变量,用来控制点击滑动到指定位置,再次点击返回到原位置
      console.log('点击过后的开关:',flag);
      var query = wx.createSelectorQuery(); //获取某个元素返回的是一个对象
      //选择id
      if(flag){
        query.select('滚动元素的类名').boundingClientRect(function (rect) {
          console.log('需要滚动的高度:', rect.height);
          var _heightd = rect.height;
          wx.pageScrollTo({
            scrollTop: _heightd,   //页面滚动的距离
            duration: 1000,    //页面滚动速度 单位ms
            success:function(e){    //成功函数
              that.setData({
                flag: false
              })
            }
          });
        }).exec();
        console.log(flag)
      }else{
        console.log(flag)
        wx.pageScrollTo({
          scrollTop: 0,
          duration: 1000,
          success: function (e) {
            that.setData({
              flag: true
            })
          }
        });
      }

猜你喜欢

转载自blog.csdn.net/qq_37949737/article/details/89919398
今日推荐