微信小程序 - 列表滚动头部吸顶

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

效果图：

GroupCell.gif

吸顶主要是 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": "支出",
        }]
      },
    ]

  },
  onShow: function () {
  },
  onPageScroll: function (res) {
    console.log(res.scrollTop);
  }

})

wxml 代码：

<view class="main-bg">
    <view wx:for="{{dataArr}}" wx:key="index" class="section">
        <view class="header"> {{item.AB_MonthDay}}</view>
        <view wx:for="{{item.AB_Bill}}" wx:key="index" class="cell">
        <view class="row1">
          <view wx:if="{{item.AB_Remark}}" class="leibie">{{item.AB_LeiBie}} · {{item.AB_Remark}}</view>
          <view wx:else="{{!item.AB_Remark}}" class="leibie">{{item.AB_LeiBie}}</view>
          <view class='{{item.AB_FenLei=="收入"?"money2":"money"}}'>{{item.AB_Money}}</view>
        </view>
        </view>
    </view>
</view>

wxss 代码：

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

.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;
}