刚开始搞小程序，搞了一周后，可以开始写组件了，写个分页组件练练手：
父组件，json文件引入：
"usingComponents": {
"paging": "../../components/paging/index" //引入存放你组件的路径
}父组件，wxml文件使用：
<paging current-index="{{page}}" total-page="{{pageTotal}}" bind:pagingChange="pagChange"></paging>父组件，js文件使用：
Page({
/**
* 页面的初始数据
*/
data: {
page: 1,
pageTotal: 10
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//初始化页面
},
//页码改变事件
pagChange: function(e){
console.log("页码改变时传到父组件的值", e);
}
})子组件，json文件定义为component：
{
"component": true //只有在json文件中定义component为true才能在其他页面引用组件
}子组件，wxml文件编写：
<!--components/paging/index.wxml-->
<view class="page-control">
<view class="page-control-btns">
<view class="page-btn {{prevBtnDis?'btn-disabled':''}}" bindtap="prevPage">上一页</view>
<view class="page-number" bindtap="shopPagePopup"><text>{{index}}</text>/<text>{{total}}</text></view>
<view class="page-btn {{nextBtnDis?'btn-disabled':''}}" bindtap="nextPage">下一页</view>
</view>
<view class="page-container" hidden="{{!pageMask}}">
<view class="page-mask" bindtap="hidePagePopup"></view>
<view class="page-popup">
<view class="page-popup-box">
<view class="page-line" wx:for="{{total}}" wx:for-index="ind" data-index="{{ind+1}}" bindtap="changePage">第{{item+1}}页</view>
</view>
</view>
</view>
</view>子组件，wxss文件样式编辑：
/* components/paging/index.wxss */
view,text,image{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.page-control{
width: 100%;
}
.page-control .page-control-btns{
width: 100%;
padding: 20rpx 0;
display: flex;
align-items: center;
justify-content: space-around;
}
.page-control .page-control-btns .page-number{
width: 20%;
text-align: center;
color: #333;
}
.page-control .page-control-btns .page-number:active{
background-color: #ddd;
}
.page-control .page-control-btns .page-btn{
width: 30%;
padding: 15rpx 20rpx;
font-size: 30rpx;
background-color: #0099CC;
color: #fff;
border-radius: 10rpx;
text-align: center;
}
.page-control .page-control-btns .page-btn:active{
opacity: .5;
}
.page-control .page-control-btns .btn-disabled{
background-color: #ddd;
color: #999;
}
.page-container{
position: fixed;
top: 0rpx;
left: 0rpx;
width: 100%;
height: 100%;
z-index: 999;
}
.page-mask{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.5);
}
.page-popup{
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.page-popup-box{
width: 60%;
margin: 0 auto;
background-color: #fff;
height: 60%;
border-radius: 10rpx;
z-index: 9999;
overflow: auto;
}
.page-line{
width: 100%;
height: 80rpx;
line-height: 80rpx;
padding: 0rpx 20rpx;
border-bottom: 1rpx solid #e2e2e2;
}
.page-line:active{
background-color: #ddd;
}子组件，js文件逻辑编写：
// components/paging/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
currentIndex: { //当前页码
type: Number,
value: 1
},
totalPage: {
type: Number
}
},
/**
* 组件的初始数据
*/
data: {
index: 1,
total: 10,
pageMask: false,
prevBtnDis: true,
nextBtnDis: false
},
/**
* 组件的方法列表
*/
lifetimes: {
// 在组件实例进入页面节点树时执行
attached: function () {
this.setData({
index: this.data.currentIndex,
total: this.data.totalPage
})
},
// 在组件实例被从页面节点树移除时执行
detached: function () {
}
},
methods: {
//每次改变页码就调用该函数
currentChangeEmit: function (touchState) {
// 自定义组件向父组件传值
const option = {
currentIndex: this.data.index,
touchState: true
};
if (touchState) option.touchState = !touchState;
// pagingChange 自定义名称事件，父组件中使用
this.triggerEvent('pagingChange', option)
/*
在父组件中写上bind:pagingChanget="get_emit",在父组件中就需要调用get_emit事件
*/
},
//开启页码弹窗
shopPagePopup: function () {
this.setData({
pageMask: true
})
},
//关闭页码弹窗
hidePagePopup: function () {
this.setData({
pageMask: false
})
},
//更改页码点击事件
changePage: function (e) {
//console.log("更改页码事件：",e);
this.setData({
pageMask: false,
index: e.currentTarget.dataset.index
})
if (this.data.prevBtnDis || this.data.nextBtnDis) {
this.currentChangeEmit(true);
}else{
this.currentChangeEmit();
}
this.judgeBtnDis();
},
//上一页点击事件
prevPage: function () {
let num = (this.data.index == 1) ? 1 : this.data.index - 1;
this.setData({
index: num
})
if (this.data.prevBtnDis) {
this.currentChangeEmit(true);
} else {
this.currentChangeEmit();
}
this.judgeBtnDis();
},
//下一页点击事件
nextPage: function () {
let num = (this.data.index == this.data.total) ? this.data.total : this.data.index + 1;
this.setData({
index: num
})
if (this.data.nextBtnDis) {
this.currentChangeEmit(true);
} else {
this.currentChangeEmit();
}
this.judgeBtnDis();
},
//判断按钮是否为disabled
judgeBtnDis: function () {
let index = this.data.index;
if (index == this.data.total) {
this.setData({
nextBtnDis: true
})
if(index==1){
this.setData({
prevBtnDis: true
})
}else{
this.setData({
prevBtnDis: false
})
}
} else if (index == 1){
this.setData({
prevBtnDis: true
})
if (index == this.data.total){
this.setData({
nextBtnDis: true
})
}else{
this.setData({
nextBtnDis: false
})
}
}else{
this.setData({
prevBtnDis: false
})
this.setData({
nextBtnDis: false
})
}
}
}
})
