devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序自定义组件开发---分页组件_微信小程序分页组件

作者：凡人多烦事01 | 2024-02-16 21:42:49

赞

踩

微信小程序分页组件

刚开始搞小程序，搞了一周后，可以开始写组件了，写个分页组件练练手：

父组件，json文件引入：

  1. "usingComponents": {
  2.     "paging": "../../components/paging/index" //引入存放你组件的路径
  3.  }

父组件，wxml文件使用：

<paging current-index="{{page}}" total-page="{{pageTotal}}" bind:pagingChange="pagChange"></paging>

父组件，js文件使用：

  1. Page({
  2.  
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     page: 1,
  8.     pageTotal: 10
  9.   },
  10.  
  11.   /**
  12.    * 生命周期函数--监听页面加载
  13.    */
  14.   onLoad: function (options) {
  15.     //初始化页面
  16.   },
  17.  
  18.   //页码改变事件
  19.   pagChange: function(e){
  20.     console.log("页码改变时传到父组件的值", e);
  21.   }
  22. })

子组件，json文件定义为component：

  1. {
  2.   "component": true //只有在json文件中定义component为true才能在其他页面引用组件
  3. }

子组件，wxml文件编写：

  1. <!--components/paging/index.wxml-->
  2. <view class="page-control">
  3.   <view class="page-control-btns">
  4.     <view class="page-btn {{prevBtnDis?'btn-disabled':''}}" bindtap="prevPage">上一页</view>
  5.     <view class="page-number" bindtap="shopPagePopup"><text>{{index}}</text>/<text>{{total}}</text></view>    
  6.     <view class="page-btn {{nextBtnDis?'btn-disabled':''}}" bindtap="nextPage">下一页</view>
  7.   </view>
  8.   <view class="page-container" hidden="{{!pageMask}}">
  9.     <view class="page-mask" bindtap="hidePagePopup"></view>
  10.     <view class="page-popup">
  11.       <view class="page-popup-box">
  12.         <view class="page-line" wx:for="{{total}}" wx:for-index="ind" data-index="{{ind+1}}" bindtap="changePage">第{{item+1}}页</view>
  13.       </view>
  14.     </view>
  15.   </view>
  16. </view>

子组件，wxss文件样式编辑：

  1. /* components/paging/index.wxss */
  2. view,text,image{
  3.   padding: 0;
  4.   margin: 0;
  5.   box-sizing: border-box;
  6. }
  7. .page-control{
  8.   width: 100%;
  9. }
  10. .page-control .page-control-btns{
  11.   width: 100%;
  12.   padding: 20rpx 0;
  13.   display: flex;
  14.   align-items: center;
  15.   justify-content: space-around;
  16. }
  17. .page-control .page-control-btns .page-number{
  18.   width: 20%;
  19.   text-align: center;
  20.   color: #333;
  21. }
  22. .page-control .page-control-btns .page-number:active{
  23.   background-color: #ddd;
  24. }
  25. .page-control .page-control-btns .page-btn{
  26.   width: 30%;
  27.   padding: 15rpx 20rpx;
  28.   font-size: 30rpx;
  29.   background-color: #0099CC;
  30.   color: #fff;
  31.   border-radius: 10rpx;
  32.   text-align: center;
  33. }
  34. .page-control .page-control-btns .page-btn:active{
  35.   opacity: .5;
  36. }
  37. .page-control .page-control-btns .btn-disabled{
  38.   background-color: #ddd;
  39.   color: #999;
  40. }
  41. .page-container{
  42.   position: fixed;
  43.   top: 0rpx;
  44.   left: 0rpx;
  45.   width: 100%;
  46.   height: 100%;
  47.   z-index: 999;
  48. }
  49. .page-mask{
  50.   width: 100%;
  51.   height: 100%;
  52.   position: absolute;
  53.   left: 0;
  54.   top: 0;
  55.   background-color: rgba(0,0,0,0.5);
  56. }
  57. .page-popup{
  58.   width: 100%;
  59.   height: 100%;
  60.   display: flex;
  61.   flex-wrap: wrap;
  62.   align-items: center;
  63.   justify-content: center;
  64. }
  65. .page-popup-box{
  66.   width: 60%;
  67.   margin: 0 auto;
  68.   background-color: #fff;
  69.   height: 60%;
  70.   border-radius: 10rpx;
  71.   z-index: 9999;
  72.   overflow: auto;
  73. }
  74. .page-line{
  75.   width: 100%;
  76.   height: 80rpx;
  77.   line-height: 80rpx;
  78.   padding: 0rpx 20rpx;
  79.   border-bottom: 1rpx solid #e2e2e2;
  80. }
  81. .page-line:active{
  82.   background-color: #ddd;
  83. }

子组件，js文件逻辑编写：

  1. // components/paging/index.js
  2. Component({
  3.   /**
  4.    * 组件的属性列表
  5.    */
  6.   properties: {
  7.     currentIndex: { //当前页码
  8.       type: Number,
  9.       value: 1
  10.     },
  11.     totalPage: {
  12.       type: Number
  13.     }
  14.   },
  15.  
  16.   /**
  17.    * 组件的初始数据
  18.    */
  19.   data: {
  20.     index: 1,
  21.     total: 10,
  22.     pageMask: false,
  23.     prevBtnDis: true,
  24.     nextBtnDis: false
  25.   },
  26.  
  27.   /**
  28.    * 组件的方法列表
  29.    */
  30.   lifetimes: {
  31.      // 在组件实例进入页面节点树时执行
  32.     attached: function () {
  33.       this.setData({
  34.         index: this.data.currentIndex,
  35.         total: this.data.totalPage
  36.       })
  37.     },
  38.     // 在组件实例被从页面节点树移除时执行
  39.     detached: function () {
  40.       
  41.     }
  42.   },
  43.   methods: {
  44.     //每次改变页码就调用该函数
  45.     currentChangeEmit: function (touchState) {
  46.       // 自定义组件向父组件传值 
  47.         const option = {
  48.           currentIndex: this.data.index,
  49.           touchState: true
  50.         };
  51.       if (touchState) option.touchState = !touchState;
  52.       // pagingChange 自定义名称事件，父组件中使用
  53.       this.triggerEvent('pagingChange', option)
  54.       /*
  55.        在父组件中写上bind:pagingChanget="get_emit",在父组件中就需要调用get_emit事件
  56.       */
  57.     },
  58.     //开启页码弹窗
  59.     shopPagePopup: function () {
  60.       this.setData({
  61.         pageMask: true
  62.       })
  63.     },
  64.     //关闭页码弹窗
  65.     hidePagePopup: function () {
  66.       this.setData({
  67.         pageMask: false
  68.       })
  69.     },
  70.     //更改页码点击事件
  71.     changePage: function (e) {
  72.       //console.log("更改页码事件：",e);
  73.       this.setData({
  74.         pageMask: false,
  75.         index: e.currentTarget.dataset.index
  76.       })
  77.       if (this.data.prevBtnDis || this.data.nextBtnDis) {
  78.         this.currentChangeEmit(true);
  79.       }else{
  80.         this.currentChangeEmit();
  81.       }
  82.       this.judgeBtnDis();
  83.     },
  84.     //上一页点击事件
  85.     prevPage: function () {
  86.       let num = (this.data.index == 1) ? 1 : this.data.index - 1;
  87.       this.setData({
  88.         index: num
  89.       })
  90.       if (this.data.prevBtnDis) {
  91.         this.currentChangeEmit(true);
  92.       } else {
  93.         this.currentChangeEmit();
  94.       }
  95.       this.judgeBtnDis();
  96.     },
  97.     //下一页点击事件
  98.     nextPage: function () {
  99.       let num = (this.data.index == this.data.total) ? this.data.total : this.data.index + 1;
  100.       this.setData({
  101.         index: num
  102.       })
  103.       if (this.data.nextBtnDis) {
  104.         this.currentChangeEmit(true);
  105.       } else {
  106.         this.currentChangeEmit();
  107.       }
  108.       this.judgeBtnDis();
  109.     },
  110.     //判断按钮是否为disabled
  111.     judgeBtnDis: function () {
  112.       let index = this.data.index;
  113.       if (index == this.data.total) {
  114.         this.setData({
  115.           nextBtnDis: true
  116.         })
  117.         if(index==1){
  118.           this.setData({
  119.             prevBtnDis: true
  120.           })
  121.         }else{
  122.           this.setData({
  123.             prevBtnDis: false
  124.           })
  125.         }
  126.       } else if (index == 1){
  127.         this.setData({
  128.           prevBtnDis: true
  129.         })
  130.         if (index == this.data.total){
  131.           this.setData({
  132.             nextBtnDis: true
  133.           })
  134.         }else{
  135.           this.setData({
  136.             nextBtnDis: false
  137.           })
  138.         }
  139.       }else{
  140.         this.setData({
  141.           prevBtnDis: false
  142.         })
  143.         this.setData({
  144.           nextBtnDis: false
  145.         })
  146.       }
  147.     }
  148.   }
  149. })

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/96943
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号