收藏
回答

使用position: fixed;后tab依然会随下拉刷新变动

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug onPullDownRefresh 工具 6.5.3 2.6.6

使用下拉刷新组件

onPullDownRefresh


下拉刷新时,顶部tab元素会随着下拉刷新而变动,于是使用position: fixed  来固定tab的位置,固定后,小程序工具上面可以成功固定,但是真机模拟时依然会发生变动。请问这个该怎么处理呢?


回答关注问题邀请回答
收藏

1 个回答

  • Maverick
    Maverick
    2019-05-10

    微信下拉刷新用的transform,transform会让position为fixed的后代元素相对于自己定位。目前无解。除非你自己写个下拉刷新。

    2019-05-10
    有用 1
    回复 6
    • 胡凯华
      胡凯华
      2019-05-10

      好的,多谢,只能我自己写一个了

      2019-05-10
      回复
    • 梁朝伟
      梁朝伟
      2019-10-15回复胡凯华
      大佬,我也遇到同样的问题,请问你这个问题解决了吗?能贴下代码吗?
      2019-10-15
      回复
    • 胡凯华
      胡凯华
      2019-10-15回复梁朝伟
      不好好拍戏,当啥程序员,快回去拍戏了
      2019-10-15
      回复
    • 梁朝伟
      梁朝伟
      2019-10-15回复胡凯华
      大佬,说正经的呢.拍戏啥的都是次要,先把问题解决了
      2019-10-15
      回复
    • 胡凯华
      胡凯华
      2019-10-15
      scroll: function () {
          console.log("scroll...");
          this.data.scrolling = true;
          this.data.isLower = false;
          this.data.isUpper = false;
        },
        //上拉 滚动条 滚动到底部时触发
        lower: function () {
          console.log("lower...")
          this.data.isLower = true;
          this.data.scrolling = false;

        },
        //下拉 滚动条 滚动顶底部时触发
        upper: function () {
          console.log("upper....");
          this.data.isUpper = true;
          this.data.scrolling = false;
        },
        start: function (e) {
          console.log('start ');
          if (this.data.scrolling || this.data.loading) {
            return;
          }
          var startPoint = e.touches[0]
          var clientY = startPoint.clientY;
          this.setData({
            downY: clientY,
            refreshHeight: 0,
            loadMoreHeight: 0,
            pull: true,
            refreshing_text: '下拉刷新',
            loading_text: '上拉加载更多'
          });
        },
        end: function (e) {
          this.data.scrolling = false;
          if (this.data.refreshing) {
            return;
          }
          console.log('end');
          //释放开始刷新
          var height = this.data.loadingHeight;
          if (this.data.refreshHeight > this.data.loadingHeight) {
            this.setData({
              refreshHeight: height,
              loading: true,
              pull: false,
              refreshing_text: '正在刷新...'
            });
            this.refresh();
            this.loadFinish();
          } else if (this.data.loadMoreHeight > height) {
            this.setData({
              loadMoreHeight: height,
              loading: true,
              pull: false,
              loading_text: '正在加载更多...'
            });
            this.loadMore();
          } else {
            this.setData({
              refreshHeight: 0,
              loadMoreHeight: 0,
              loading: false,
              pull: true
            })
          }

        },
        //模拟刷新数据
        refresh: function () {
          switch (this.data.activeIndex) {
            case '0': {
              //消费记录请求
              this.setData({
                tradingListData: [],
                packageCurrent: 1
              });
              this.getUserTradingRecordsRequest();
              break;
            }
            case '1': {
              //充值记录请求
              this.setData({
                payListData: [],
                packageCurrent: 1
              });
              this.getPayRecordsRequest();
              break;
            }
            default: {
              break;
            }
          }
        },
        //模拟加载更多数据
        loadMore: function () {
          var self = this;
          var newPage = self.data.packageCurrent;
          newPage++;
          self.setData({
            packageCurrent: newPage
          });
          switch (this.data.activeIndex) {
            case '0': {
              //消费记录请求
              this.getUserTradingRecordsRequest();
              break;
            }
            case '1': {
              //充值记录请求
              this.getPayRecordsRequest();
              break;
            }
            default: {
              break;
            }
          }
        },
        loadFinish: function () {
          var that = this;
          setTimeout(function () {
            //2s后刷新结束
            that.setData({
              refreshHeight: 0,
              loadMoreHeight: 0,
              loading: false
            })
          }, 1500);
        },
        move: function (e) {
          // console.log("move...:scrolling:" + this.data.scrolling, 'loading:' + this.data.loading
          // + 'isLower:' + this.data.isLower);
          if (this.data.scrolling || this.data.loading) {
            return;
          }
          var movePoint = e.changedTouches[0]
          var moveY = (movePoint.clientY - this.data.downY) * 0.6;
          //1.下拉刷新
          if (this.data.isUpper && moveY > 0) {
            console.log("下拉...dy:", moveY);
            this.setData({
              refreshHeight: moveY
            })
            if (this.data.refreshHeight > this.data.loadingHeight) {
              this.setData({
                pull: false,
                refreshing_text: '释放立即刷新'
              })
            } else {
              this.setData({
                pull: true,
                refreshing_text: '下拉刷新'
              })
            }
          } else if (this.data.isLower && moveY < 0) {//2上拉加载更多
            console.log("上拉...dy:", moveY);
            this.setData({
              loadMoreHeight: Math.abs(moveY)
            })
            if (this.data.loadMoreHeight > this.data.loadingHeight) {
              this.setData({
                pull: false,
                loading_text: '释放加载更多'
              })
            } else {
              this.setData({
                pull: true,
                refreshing_text: '上拉加载更多'
              })
            }
          }
        }
      2019-10-15
      回复
    查看更多(1)
登录 后发表内容