美文网首页
微信小程序模拟 微信账单 滚动效果

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

作者: 郭的妻 | 来源:发表于2020-06-23 15:29 被阅读0次

    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,
    });
  }
})

    相关文章

      网友评论

          本文标题：微信小程序模拟 微信账单 滚动效果

          本文链接：https://www.haomeiwen.com/subject/hkjhfktx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|微信小程序模拟 微信账单 滚动效果|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！