本文是小程序系列的第十篇，了解前面的文章有助于更好的理解本文：
8. 小程序（八）列表展示，数据传递，页面跳转
9. 小程序（九）顶部轮播图和底部TabBar样式
前言
一，添加公用部分
二，使用公共部分
上篇文章为大家讲述了小程序 顶部轮播图和底部TanBar样式；本篇文章接着上篇内容继续为大家介绍小程序的新功能 加载更多的公共的写法
一，添加公用部分
小程序开发中为了避免 一样的东西重复写，照成冗余，我们提倡一样的界面做成公用部分，在使用的地方引用后使用。
我们就以数据列表 底部的加载更多为例，来实现调用公用部分。
1. 添加目录
添加底部加载更多的公用部分 ，我这里添加目录refreshFooter
2. 添加Page，文件名字是 refreshFooter ，自动生成 四个文件（js,json,wxml,wxss）,并且文件名字都是 refreshFooter。
如下图：
#js文件内容
// pages/refreshFooter/refreshFooter.jsComponent({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {refreshState: 0,// 0 闲置状态 1 正在刷新中的状态 2 没有更多的数据了},/*** 组件的方法列表*/methods: {updateUI: function (refreshState) {this.setData({refreshState: refreshState})},}})
1. 组件的初识数据
2. 组件的方法，页面更新
#json文件
{"component": true,"usingComponents": {}}
#wxml文件
<!--pages/refreshFooter/refreshFooter.wxml--><view class="weui-loadmore" hidden="{{refreshState == 0 || refreshState == 2}}"><view class="weui-loading"></view><view class="weui-loadmore__tips">正在加载</view></view><view class="weui-loadmore" hidden="{{refreshState == 0 || refreshState == 1}}"><view class="weui-loadmore__tips">没有更多数据了</view></view>
添加加载更多和正在加载的界面效果
#wxss文件
/* pages/refreshFooter/refreshFooter.wxss */.weui-loading {margin: 0 5px;width: 20px;height: 20px;display: inline-block;vertical-align: middle;-webkit-animation: weuiLoading 1s steps(12, end) infinite;animation: weuiLoading 1s steps(12, end) infinite;background-size: 100%;}.weui-loadmore {width: 65%;margin: 1.5em auto;line-height: 1.6em;font-size: 14px;text-align: center;}.weui-loadmore__tips {display: inline-block;vertical-align: middle;}
样式的添加。
通过上面的实现，我们基本完成的公用部分的效果。下面我们做调用公共部分。
二，使用公共部分
按照上面的原理 我们新建 一个目录index，并且添加index page生成 四个文件来做功能实现.
#js文件的添加
//index.jsimport net from '../../utils/util.js';Page({/*** 页面的初始数据*/data: {page: 0,totalPages: 0,projects: [{_id: 1,title: "小程序已成为微信生态内的红利聚集地小程序已成为微信生态内的红利聚集地,各种场景核心功能,一键生成小程序,提前布局微信新生态,抢占第一波红利.",},{_id: 2,title: "小程序已成为微信生态内的红利聚集地小程序已成为微信生态内的红利聚集地各种场景核心功能,一键生成小程序,提前布局微信新生态,抢占第一波红利.",},{_id: 3,title: "小程序已成为微信生态内的红利聚集地小程序已成为微信生态内的红利聚集地各种场景核心功能,一键生成小程序,提前布局微信新生态,抢占第一波红利.",},{_id: 4,title: "小程序已成为微信生态内的红利聚集地小程序已成为微信生态内的红利聚集地各种场景核心功能,一键生成小程序,提前布局微信新生态,抢占第一波红利.",},{_id: 5,title: "小程序已成为微信生态内的红利聚集地小程序已成为微信生态内的红利聚集地各种场景核心功能,一键生成小程序,提前布局微信新生态,抢占第一波红利.",},{_id: 6,title: "小程序已成为微信生态内的红利聚集地小程序已成为微信生态内的红利聚集地各种场景核心功能,一键生成小程序,提前布局微信新生态,抢占第一波红利.",},{_id: 7,title: "小程序已成为微信生态内的红利聚集地小程序已成为微信生态内的红利聚集地各种场景核心功能,一键生成小程序,提前布局微信新生态,抢占第一波红利.",}]},loadData: function () {this.data.page = 0;// this.fetchData().then(res => {wx.stopPullDownRefresh()// })// wx.hideLoading()},loadMoreData: function () {this.data.page = this.data.page + 1;return this.fetchData()},fetchData: function () {let _this = this_this.setData({projects: _this.data.projects,})wx.hideLoading()},toProjectDetailPage: function (e) {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// wx.startPullDownRefresh({})},/*** 生命周期函数--监听页面显示*/onShow: function () {this.loadData()},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {wx.showLoading({title: '加载中',})this.loadData()},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {let refreshFooter = this.selectComponent('#refreshFooter');if (this.data.page + 1 == this.data.totalPages) {refreshFooter.updateUI(2)} else {refreshFooter.updateUI(1)this.loadMoreData().then(res => {refreshFooter.updateUI(2)})}},})
1. 添加静态数据数组 projects
2. 定义页面大小 page 和总页码 totalPages
3. 添加加载跟多数据函数 fetchData
4. 上拉和下拉监听事件的 添加
onPullDownRefresh，onReachBottom5. onReachBottom 中添加公共组件的调用
#json文件的添加
{"usingComponents": {"refresh-footer": "../refreshFooter/refreshFooter"},"enablePullDownRefresh": true,"navigationBarTitleText": "公用模块"}
#wxml文件的添加
<!--index.wxml--><!--pages/projectList/projectList.wxml--><view class='cell'wx:for="{{projects}}"wx:key="{{index}}"bindtap='toProjectDetailPage'data-orderId="{{item.id}}"><!-- <project-cellname="{{item.name}}"content="{{item.content}}"item="{{item}}"></project-cell> --><view><text class='cell-title' style='color: #353f41;'>{{item.title}}</text></view></view><refresh-footer id="refreshFooter"></refresh-footer>
1. 添加一个列表展示
2. 添加 调用 公共组件
<refresh-footer id="refreshFooter"></refresh-footer>
#wxss文件的添加
/**index.wxss**//* pages/projectList/projectList.wxss */.cell {border-bottom: solid 2rpx #d5e5ec;}
运行项目：
好了 到这里列表加载更多 公用写法，基本都说完了，如果小伙伴还有疑问，可以 公众号 加群，我们一起进步
本案例下载地址：
https://github.com/ProceduralZC/WX/tree/master/wxpublic
- End -
▽
