微信小程序模拟 微信账单 滚动效果

1.wxml

<!--pages/my/My-wallet/My-wallet.wxml-->
<view class="Cash">
  <view class="Cash-view">
    <!-- 提现记录  -->
    <view class="tixianjilu" bindtap="recordTap">提现记录></view>

    <!-- 可提现余额  -->
    <view class="Cash-view-mon">可提现余额</view>
    <view class="Cash-view-mon1">￥{{keprice}}</view>

    <!-- 立即提现按钮  -->
    <button class="Fail-btn">立即提现</button>

    <!-- 累计收益 -->
    <view class="Cash-view-mon2">
      <view class="Cash-view-mon2s">
        <text>累计收益(元)</text>
        <text>350</text>
      </view>
      <view class="Cash-view-mon2s">
        <text>提现中(元)</text>
        <text>350</text>
      </view>
      <view class="Cash-view-mon2s">
        <text>已提现(元)</text>
        <text>350</text>
      </view>
    </view>
  </view>

  <view class="Cash-view2 Cash-view2ss" style="position:{{fixed}};top:0;">
    <view class="time">{{year}}</view>
    <picker bindchange="bindPickerChange" value="{{tabindex}}" range="{{tabnav}}">
      <view class="picker">{{tabnav[tabindex]}} > </view>
    </picker>
  </view>
  <!-- 收益明显 -->
  <view class="Cash-view1" style="padding-top:{{padtop}}; margin-top:{{martop}}px;">
    <view class="scroll-view-item" wx:for="{{billingdata}}" wx:key="{{index}}">
      <view class="Cash-view2 Cash-view2s">
        <view class="time">{{item.title}}</view>
      </view>
      <!-- list 内容 开始-->
      <view class="scroll-view1">
        <view wx:for="{{item.list}}" wx:key="{{index}}" class="scroll-view1s">
          <view class="scroll-view1s-top">
            <text class="scroll-view1s-toptitle">{{item.title}}</text>
            <text class="scroll-view1s-topstatus">未提现</text>
          </view>
          <view class="scroll-view1s-top">
            <text class="scroll-view1s-toptime">{{item.time}}</text>
            <text class="scroll-view1s-toprice">+{{item.price}}元</text>
          </view>
        </view>
      </view>
      <!-- list 内容 结束-->
    </view>
  </view>
</view>

2.wxss

/* pages/my/My-order/My-order.wxss */

view, textarea, input, checkbox, radio, text, icon {
  box-sizing: border-box;
}

.My-order {
  width: 100%;
}

/* 选项卡 */

.order-xuan {
  width: 100%;
  padding: 40rpx 28rpx;
  height: 150rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ff7b06;
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  z-index: 9999;
}

.order-xuans {
  width: 170rpx;
  font-size: 34rpx;
  height: 68rpx;
  line-height: 66rpx;
  text-align: center;
  border-radius: 34rpx;
  color: #fff;
  letter-spacing: 1rpx;
}

.order-xuan-active {
  background: #ffd2ab !important;
  color: #6f4c2b !Important;
  font-weight: bold;
  font-size: 38rpx!Important;
}

/* 选项卡 内容 */

.order-content {
  width: 100%;
  padding-top:172rpx; 
  /* padding: 180rpx 30rpx 30rpx 30rpx; */
}

.order-content-no {
  display: none;
}

3.js

// pages/my/My-wallet/My-wallet.js// pages/my/Cash-withdrawal/Cash-withdrawal.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userId: '',
    keprice: 0,
    price: '',
    tabnav: ['全部', '提现中', '已到账'], // tab数组
    tabindex: 0, // 控制tabnav active
    year: '2020年06月', //固定位置显示 年月
    billingdata: [
      {
        title: '2020年06月',
        list: [
          { title: '万达广场01车位', price: 15, time: '2020-06-22 09:00:00' },
        ]
      },
      {
        title: '2020年05月',
        list: [
          { title: '万达广场01车位', price: 15, time: '2020-05-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-05-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-05-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-05-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-05-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-05-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-05-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-05-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-05-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-05-22 10:00:00' },
        ]
      },
      {
        title: '2020年04月',
        list: [
          { title: '万达广场01车位', price: 15, time: '2020-04-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-04-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-04-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-04-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-04-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-04-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-04-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-04-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-04-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-04-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-04-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-04-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-04-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-04-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-04-22 09:00:00' }
        ]
      },
      {
        title: '2020年03月',
        list: [
          { title: '万达广场01车位', price: 15, time: '2020-03-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-03-22 10:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-03-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-03-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-03-22 10:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-03-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-03-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-03-22 10:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-03-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-03-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-03-22 10:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-03-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-03-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-03-22 10:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-03-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-03-22 09:00:00' }
        ]
      },
      {
        title: '2020年02月',
        list: [
          { title: '万达广场01车位', price: 15, time: '2020-02-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-02-22 10:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-02-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-02-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-02-22 10:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-02-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-02-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-02-22 10:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-02-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-02-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-02-22 10:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-02-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-02-22 09:00:00' }
        ]
      },
    ],
    pageindex: 0,
    Casheight: 0, //可提现余额部分高度
    contentHeight: 0, //固定年月的内容高度
    fixed: 'relative', // 需要固定年月
    padtop: "0px", //当固定年月固定时 .Cash-view1 改变padding值
    scrollTop: 0,
    height: 0,
    martop:0,
  },
  /**
  * 生命周期函数--监听页面加载
  */
  onLoad() {
    this.Setdata("userId", app.globalData.userId);

    /* 获取 可提现余额部分高度 */
    this.getCasheight();

    /* 获取 固定年月内容高度 */
    this.getcontentHeight();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getMy();
  },

  /**
   * 获取个人信息
   * zid = > 用户id
   */
  getMy() {
    let data = {
      zid: this.data.userId
    };
    app.globalData.request.post(data, 'zuhu/getMy').then(res => {
      console.log(res)
      if (res.data.code == 0) {
        if (res.data.data != null) {
          // this.Setdata("userDetail", res.data.data);
          this.Setdata("keprice", res.data.data.shouyi)
        }
      }
    }, err => {
      console.log(err)
    });
  },

  onPageScroll: function (e) {
    /* 获取 整个页面(.Cash) top属性值*/
    this.setHeightTop();

    /**
     * 1.判断页面 是 向上滚动、向下滚动 分别模拟
     * 2.模拟 账单 上拉 下拉 显示 对应年 效果 
     */
    this.setTopBottomFixed(e);

  },


  /* 获取 可提现余额部分高度 */
  getCasheight() {
    wx.createSelectorQuery().selectAll('.Cash-view').boundingClientRect((rect) => {
      // console.log("可提现余额部分高度---",rect)
      this.Setdata("Casheight", rect[0].height.toFixed(0))
    }).exec();
  },

  /* 获取  固定年月内容高度 */
  getcontentHeight() {
    wx.createSelectorQuery().selectAll('.Cash-view2ss').boundingClientRect((rect) => {
      // console.log("固定年月内容高度---",rect)
      this.Setdata("contentHeight", rect[0].height.toFixed(0));
      this.Setdata("martop", -rect[0].height.toFixed(0));
    }).exec();
  },

  /* 
   * 获取 整个页面(.Cash) top属性值 
   * 并将 年月的值 到固定的位置 进行样式固定
   */
  setHeightTop() {
    wx.createSelectorQuery().selectAll('.Cash').boundingClientRect((rect) => {
      this.Setdata("height", rect[0].height.toFixed(0))
      if (rect[0].top <= -this.data.Casheight) {
        // 需要固定年月
        this.Setdata("fixed", "fixed");
        this.Setdata("padtop", this.data.contentHeight + "px");
      } else {
        // 无需要固定年月
        this.Setdata("fixed", "relative");
        this.Setdata("padtop", "0px");
      }
    }).exec();
  },

  /* 
   * 1.判断页面 是 向上滚动、向下滚动 分别模拟
   * 2.模拟 账单 上拉 下拉 显示 对应年 效果
   */
  setTopBottomFixed(e) {
    //当滚动的top值最大或最小时，为什么要做这一步是因为在手机实测小程序的时候会发生滚动条回弹，所以为了处理回弹，设置默认最大最小值
    if (e.scrollTop <= 0) {
      e.scrollTop = 0;
    } else if (e.scrollTop > this.data.height) {
      e.scrollTop = this.data.height;
    }
    //判断浏览器滚动条上下滚动
    if (e.scrollTop > this.data.scrollTop || e.scrollTop == this.data.height) {
      //向下滚动
      wx.createSelectorQuery().selectAll('.scroll-view-item').boundingClientRect((rect) => {
        for (var i = 0; i < rect.length; i++) {
          if (rect[i].top <= 20 && rect[i].top >= -20) {
            this.Setdata("year", this.data.billingdata[i].title);
            return;
          }
        }
      }).exec();
    } else {
      //向上滚动
      wx.createSelectorQuery().selectAll('.scroll-view-item').boundingClientRect((rect) => {
        for (var i = 0; i < rect.length; i++) {
          if (rect[i].bottom <= this.data.contentHeight && rect[i].bottom >= -this.data.contentHeight) {
            this.Setdata("year", this.data.billingdata[i].title);
            return;
          }
        }
      }).exec();
    }
    //给scrollTop重新赋值
    this.Setdata("scrollTop", e.scrollTop.toFixed(0));
  },

  /**
   * 点击提现记录
   */
  recordTap() {
    wx.navigateTo({
      url: '../../my/Withdrawals-record/Withdrawals-record',
    })
  },


  /*
   * 点击 全部
   */
  bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.Setdata("tabindex", e.detail.value);
  },

  /**
 * 页面上拉触底事件的处理函数
 */
  onReachBottom: function () {
    console.log(1)
  },



  /**
   * 小黑窗  toast
   */
  ToastShow: function (msg) {
    wx.showToast({
      title: msg,
      icon: 'none',
      duration: 2000
    });
  },

  /**
   * 每当输入 或 选择值的时候  进行的 赋值
   */
  Setdata: function (data, value) {
    this.setData({
      [data]: value,
    });
  }
})

js1

// pages/my/My-wallet/My-wallet.js// pages/my/Cash-withdrawal/Cash-withdrawal.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userId: '',
    keprice: 0,
    price: '',
    tabnav: ['全部', '提现中', '已到账'], // tab数组
    tabindex: 0, // 控制tabnav active
    year: '2020年06月', //固定位置显示 年月
    billingdata: [
      {
        title: '2020年06月',
        list: [
          { title: '万达广场01车位', price: 15, time: '2020-06-22 09:00:00' },
        ]
      },
      {
        title: '2020年05月',
        list: [
          { title: '万达广场01车位', price: 15, time: '2020-05-22 09:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-05-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-05-22 10:00:00' },
        ]
      },
      {
        title: '2020年04月',
        list: [
          { title: '万达广场01车位', price: 15, time: '2020-04-22 09:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-04-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-04-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-04-22 09:00:00' }
        ]
      },
      {
        title: '2020年03月',
        list: [
          { title: '万达广场01车位', price: 15, time: '2020-03-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-03-22 10:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-03-22 10:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-03-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-03-22 09:00:00' }
        ]
      },
      {
        title: '2020年02月',
        list: [
          { title: '万达广场01车位', price: 15, time: '2020-02-22 09:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-02-22 10:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-02-22 10:00:00' },
          { title: '万达广场02车位', price: 10, time: '2020-02-22 10:00:00' },
          { title: '万达广场01车位', price: 15, time: '2020-02-22 09:00:00' }
        ]
      },
    ],
    pageindex: 0,
    Casheight: 0, //可提现余额部分高度
    contentHeight: 0, //固定年月的内容高度
    fixed: 'relative', // 需要固定年月
    padtop: "0px", //当固定年月固定时 .Cash-view1 改变padding值
    scrollTop: 0,
    height: 0,
    martop:0,
  },
  /**
  * 生命周期函数--监听页面加载
  */
  onLoad() {
    this.Setdata("userId", app.globalData.userId);

    /* 获取 可提现余额部分高度 */
    this.getCasheight();

    /* 获取 固定年月内容高度 */
    this.getcontentHeight();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getMy();
  },

  /**
   * 获取个人信息
   * zid = > 用户id
   */
  getMy() {
    let data = {
      zid: this.data.userId
    };
    app.globalData.request.post(data, 'zuhu/getMy').then(res => {
      console.log(res)
      if (res.data.code == 0) {
        if (res.data.data != null) {
          // this.Setdata("userDetail", res.data.data);
          this.Setdata("keprice", res.data.data.shouyi)
        }
      }
    }, err => {
      console.log(err)
    });
  },
 
  // onPageScroll: function (e) {
    /* 获取 整个页面(.Cash) top属性值*/
    // this.setHeightTop();

    /**
     * 1.判断页面 是 向上滚动、向下滚动 分别模拟
     * 2.模拟 账单 上拉 下拉 显示 对应年 效果 
     */
    // this.setTopBottomFixed(e);

  // },
  scroll(e){
    this.setHeightTop();
    this.setTopBottomFixed(e);
  },


  /* 获取 可提现余额部分高度 */
  getCasheight() {
    wx.createSelectorQuery().selectAll('.Cash-view').boundingClientRect((rect) => {
      // console.log("可提现余额部分高度---",rect)
      this.Setdata("Casheight", rect[0].height.toFixed(0))
    }).exec();
  },

  /* 获取  固定年月内容高度 */
  getcontentHeight() {
    wx.createSelectorQuery().selectAll('.Cash-view2ss').boundingClientRect((rect) => {
      // console.log("固定年月内容高度---",rect)
      this.Setdata("contentHeight", rect[0].height.toFixed(0));
      this.Setdata("martop", -rect[0].height.toFixed(0));
    }).exec();
  },

  /* 
   * 获取 整个页面(.Cash) top属性值 
   * 并将 年月的值 到固定的位置 进行样式固定
   */
  setHeightTop() {
    wx.createSelectorQuery().selectAll('.Cash').boundingClientRect((rect) => {
      this.Setdata("height", rect[0].height.toFixed(0))
      if (rect[0].top <= -this.data.Casheight+20) {
        // 需要固定年月
        this.Setdata("fixed", "fixed");
        this.Setdata("padtop", this.data.contentHeight + "px");
      } else {
        // 无需要固定年月
        this.Setdata("fixed", "relative");
        this.Setdata("padtop", "0px");
      }
    }).exec();
  },

  /* 
   * 1.判断页面 是 向上滚动、向下滚动 分别模拟
   * 2.模拟 账单 上拉 下拉 显示 对应年 效果
   */
  setTopBottomFixed(e) {
    //当滚动的top值最大或最小时，为什么要做这一步是因为在手机实测小程序的时候会发生滚动条回弹，所以为了处理回弹，设置默认最大最小值
    if (e.detail.scrollTop <= 0) {
      e.detail.scrollTop = 0;
    } else if (e.detail.scrollTop > this.data.height) {
      e.detail.scrollTop = this.data.height;
    }
    //判断浏览器滚动条上下滚动
    if (e.detail.scrollTop > this.data.scrollTop || e.detail.scrollTop == this.data.height) {
      //向下滚动
      // console.log("向下滚动")
      wx.createSelectorQuery().selectAll('.scroll-view-item').boundingClientRect((rect) => {
        for (var i = 0; i < rect.length; i++) {
          if (rect[i].top <= 40 && rect[i].top >= -40) {
            this.Setdata("year", this.data.billingdata[i].title);
            return;
          }
        }
      }).exec();
    } else {
      // console.log("向上滚动")
      wx.createSelectorQuery().selectAll('.scroll-view-item').boundingClientRect((rect) => {
        for (var i = 0; i < rect.length; i++) {
          if (rect[i].bottom <= this.data.contentHeight+20 && rect[i].bottom >= -this.data.contentHeight+20) {
            this.Setdata("year", this.data.billingdata[i].title);
            return;
          }
        }
      }).exec();
    }
    //给scrollTop重新赋值
    this.Setdata("scrollTop", e.detail.scrollTop);
  },

  /**
   * 点击提现记录
   */
  recordTap() {
    wx.navigateTo({
      url: '../../my/Withdrawals-record/Withdrawals-record',
    })
  },


  /*
   * 点击 全部
   */
  bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.Setdata("tabindex", e.detail.value);
  },

  /**
 * 页面上拉触底事件的处理函数
 */
  onReachBottom: function () {
    console.log(1)
  },



  /**
   * 小黑窗  toast
   */
  ToastShow: function (msg) {
    wx.showToast({
      title: msg,
      icon: 'none',
      duration: 2000
    });
  },

  /**
   * 每当输入 或 选择值的时候  进行的 赋值
   */
  Setdata: function (data, value) {
    this.setData({
      [data]: value,
    });
  }
})