原理：当拉到屏幕拉到底部，显示加载动态，然后显示出内容，内容是静态内容，不是动态数据
效果：
例子： 拉到底部，显示出合作学校
wxml文件:
< view class= 'guess-you-like' data-id= "school" wx:if= "{{school}}"> 先隐藏合作学校
<!-- 正在加载 -->
<view class="weui-loadmore" hidden="{{isHideLoadMore}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">正在加载</view>
</view>
<!--合作院校-->
<view class='guess-you-like' data-id="school" wx:if="{{school}}">
<view class='title'>
<view class='title-left'>
<image src='/images/video/video.png'></image>
<text class='title-text'>合作院校</text>
</view>
</view>
<view class='plate-list'>
<view class='plate-list-school-left'>
<image src="/images/school/s1.jpg" class='content-img' ></image>
</view>
<view class='plate-list-right'>
<view>
<text >中国地质大学</text>
</view>
<view class='dengji-num more-ellipsis'>
<text>中国地质大学（北京）位于北京市海淀区学院路，学校的前身是1952年院系调整时期由北京大学、清华大学、天津大学和唐山铁道学院等院校的地质系（科）合并组建的北京地质学院，是建国初期著名的“八大学院”之一。</text>
</view>
</view>
</view>
<view class='plate-list'>
<view class='plate-list-school-left'>
<image src="/images/school/s2.jpg" class='content-img' ></image>
</view>
<view class='plate-list-right'>
<view>
<text >北京外国语大学</text>
</view>
<view class='dengji-num more-ellipsis'>
<text>北京外国语大学是教育部直属、国家首批“211工程”建设的全国重点大学之一,是目前我国高等院校中历史悠久、教授语种最多、办学层次齐全的外国语大学。大学目前已基本</text>
</view>
</view>
</view>
<view class='plate-list'>
<view class='plate-list-school-left'>
<image src="/images/school/s3.jpg" class='content-img' ></image>
</view>
<view class='plate-list-right'>
<view>
<text >南开大学</text>
</view>
<view class='dengji-num more-ellipsis'>
<text>南开大学由中华人民共和国教育部直属，位列国家“双一流”、“211工程”和“985工程”，入选首批“2011计划”、“111计划”、“珠峰计划”、“卓越法律人才教育培养计划”、“教育部来华留学示范基地”，被誉为“学府北辰”。</text>
</view>
</view>
</view>
<view class='plate-list'>
<view class='plate-list-school-left'>
<image src="/images/school/s4.jpg" class='content-img' ></image>
</view>
<view class='plate-list-right'>
<view>
<text >广东外语外贸大学</text>
</view>
<view class='dengji-num more-ellipsis'>
<text>是一所具有鲜明国际化特色的广东省属重点大学。学校入选“2011计划” “教育部来华留学示范基地” “亚洲大学学生交流集体行动计划”（亚洲校园计划），是向联合国提供高端翻译人才的全球19所大学之一、全国国际经济与贸易学科的创始单位之一、国际大学翻译学院联合会成员，是华南地区国际化人才培养和外国语言文化、对外经济贸易、国际战略研究的重要基地。</text>
</view>
</view>
</view>
<view class='plate-list'>
<view class='plate-list-school-left'>
<image src="/images/school/s5.jpg" class='content-img' ></image>
</view>
<view class='plate-list-right'>
<view>
<text >广东财经大学</text>
</view>
<view class='dengji-num more-ellipsis'>
<text>是一所以法律和商科为教学特色的高等学府，广东省重点建设大学之一，是国家教育部《1+2+1中美人才培养计划》定点高校之一，全国首批卓越法律人才教育培养计划高校，“一带一路”高校战略联盟成员。</text>
</view>
</view>
</view>
<view class='plate-list'>
<view class='plate-list-school-left'>
<image src="/images/school/s6.jpg" class='content-img' ></image>
</view>
<view class='plate-list-right'>
<view>
<text >深圳大学</text>
</view>
<view class='dengji-num more-ellipsis'>
<text>深圳大学是深圳唯一的一所综合性大学，深圳市唯一一所设立师范教育的大学，也是深圳规模最大的一所本科院校。</text>
</view>
</view>
</view>
<view class='plate-list'>
<view class='plate-list-school-left'>
<image src="/images/school/s7.jpg" class='content-img' ></image>
</view>
<view class='plate-list-right'>
<view>
<text >暨南大学</text>
</view>
<view class='dengji-num more-ellipsis'>
<text>是国家“211工程”、“985工程优势学科创新平台”重点建设高校，国家“双一流”世界一流学科建设高校，教育部、国侨办、广东省三方签约重点共建大学，教育部全国首批深化创新创业教育改革示范高校；</text>
</view>
</view>
</view>
<view class='plate-list'>
<view class='plate-list-school-left'>
<image src="/images/school/s8.jpg" class='content-img' ></image>
</view>
<view class='plate-list-right'>
<view>
<text >华南师范大学</text>
</view>
<view class='dengji-num more-ellipsis'>
<text>是广东省人民政府和教育部共建高校，入选国家“双一流”世界一流学科建设高校 [1] 、首批国家“211工程”重点建设大学，入选国家“111计划” [2] 、“卓越教师培养计划”、广东省高水平大学整体建设高校、广东省重点大学、中国政府奖学金来华留学生接收院校，是中国100所首批联入CERNET和INTERNET网的高等院校之一。</text>
</view>
</view>
</view>
</view>
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: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
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;
}
js文件
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
school: false,
bannerVideoAttr: {
"src": "",
"duration": "178",
"controls": true,
"autoplay": false,
"show-fullscreen-btn": true
}
},
//下拉刷新
onPullDownRefresh: function () {
wx.showNavigationBarLoading() //在标题栏中显示加载
//模拟加载
setTimeout(function () {
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}, 1500);
},
onLoad: function () {
},
//加载更多
onReachBottom: function () {
console.log('加载更多')
setTimeout(() => {
this.setData({
isHideLoadMore: true,
school: true
})
}, 1000)
},
