微信小程序 - 固定头部 列表滚动header吸顶,滚动更新数据

demo 地址: https://github.com/iotjin/Jh_weapp

效果图：

吸顶主要是 position: sticky;

.header {
  background: rgb(230, 230, 230);
  height: 25px;
  line-height: 25px;
  padding-left: 30rpx;
  font-size: 13px;
  align-items: center;
  position: sticky;
  top: 0;
}

js 代码：

Page({
  data: {
    dataArr: [{
        "AB_MonthDay": "30/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭1",
          "AB_Money": "11",
          "AB_Remark": "备注",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }, {
          "AB_LeiBie": "吃饭1",
          "AB_Money": "22",
          "AB_Remark": "备注2",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }, {
          "AB_LeiBie": "红包1",
          "AB_Money": "33",
          "AB_Remark": "备注33",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "收入",
        }, ]
      },
      {
        "AB_MonthDay": "29/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭2",
          "AB_Money": "22",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },
      {
        "AB_MonthDay": "28/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭3",
          "AB_Money": "33",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },
      {
        "AB_MonthDay": "27/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭4",
          "AB_Money": "44",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },
      {
        "AB_MonthDay": "26/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭4",
          "AB_Money": "44",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },
      {
        "AB_MonthDay": "25/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭4",
          "AB_Money": "44",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },
      {
        "AB_MonthDay": "24/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭4",
          "AB_Money": "44",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },
      {
        "AB_MonthDay": "23/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭4",
          "AB_Money": "44",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },
      {
        "AB_MonthDay": "22/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭4",
          "AB_Money": "44",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },
      {
        "AB_MonthDay": "21/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭4",
          "AB_Money": "44",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },
      {
        "AB_MonthDay": "20/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭4",
          "AB_Money": "44",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },
      {
        "AB_MonthDay": "19/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭4",
          "AB_Money": "44",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },

      {
        "AB_MonthDay": "19/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭4",
          "AB_Money": "44",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },
      {
        "AB_MonthDay": "19/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭4",
          "AB_Money": "44",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },
      {
        "AB_MonthDay": "19/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭4",
          "AB_Money": "44",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },
      {
        "AB_MonthDay": "19/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭4",
          "AB_Money": "44",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },
      {
        "AB_MonthDay": "19/06",
        "AB_ZhiChu": "1111",
        "AB_ShouRu": "2222",
        "AB_Bill": [{
          "AB_LeiBie": "吃饭4",
          "AB_Money": "44",
          "AB_Remark": "",
          "AB_Date": "2011-11-11 15:38:16",
          "AB_FenLei": "支出",
        }]
      },



    ],
    Time:0,

  },
  onShow: function () {
    wx.setNavigationBarTitle({
      title: '分组列表'
    })
  },
  onPageScroll: function (e) {
    // console.log(e.scrollTop);

    // let index = e.scrollTop / 71
    // index = parseInt(index);
    // console.log(index);
    // let data = this.data.dataArr[index]

    let topHeight = 120
    var that = this;
    var query = wx.createSelectorQuery().in(that);
    query.selectViewport().scrollOffset()
    query.selectAll("#header").boundingClientRect();
    // query.select("#header").boundingClientRect();
    query.exec(function (res) {
      // console.log(res);
      let time = ''
      var resultIndex = res[1].findIndex((v) => {
        return v.top === topHeight;
      });
      if (resultIndex == -1) {
        let tempArr = []
        for (let index = 0; index < res[1].length; index++) {
          let data = res[1][index];
          tempArr.push(data.top)
        }
        let tempIndex = that.getClosestValueIndex(tempArr, topHeight)
        // console.log(tempIndex);
        time = res[1][tempIndex].dataset.selectdata
      } else {
        time = res[1][resultIndex].dataset.selectdata
      }
      console.log(time);

      that.setData({
        Time: time,
      });
    });

  },

  getClosestValueIndex: function (arr, num) {
    var newArr = [];
    arr.map(function (x) {
      // 对数组各个数值求差值
      newArr.push(Math.abs(x - num));
    });
    // 求最小值的索引
    var index = newArr.indexOf(Math.min.apply(null, newArr));
    // return arr[index];
    return index;
  },

  ClickCell() {
    console.log("点击cell");

  },


})

wxml 代码：

 {{Time}}


	
		 {{item.AB_MonthDay}}
		
			
				{{item.AB_LeiBie}} · {{item.AB_Remark}}
				{{item.AB_LeiBie}}
				{{item.AB_Money}}
			
		
	

wxss 代码：

.top-bg {
  /* height: 230rpx; */
  height: 120px;
  width: 100%;
  background: orange;
  position: fixed;
  top: 0;
  z-index: 1;
}

.main-bg {
  /* padding-top: 230rpx; */
  padding-top: 120px;
}

.header {
  background: rgb(230, 230, 230);
  height: 25px;
  line-height: 25px;
  padding-left: 30rpx;
  font-size: 13px;
  align-items: center;
  position: sticky;
  /* top: 230rpx; */
  top: 120px;
}

.cell {
  background: white;
  height: 44px;
  align-items: center;
  line-height: 44px;
  border-bottom: 1px solid rgb(230, 230, 230);
}

.row1 {
  margin-left: 30rpx;
  display: flex;
  justify-content: space-between;
}

.leibie {
  width: 70%;
  font-size: 30rpx;
  color: black;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.money {
  font-size: 32rpx;
  color: black;
  font-weight: bold;
  margin-right: 30rpx;
}

.money2 {
  font-size: 32rpx;
  color: #38BC9D;
  font-weight: bold;
  margin-right: 30rpx;
}