1.阻止事件冒泡
将里边盒子点击事件 bind:tap=" " 改成 catch:tap=" "
以下事件为非冒泡事件:submit、input、scroll 事件
2.下拉刷新
3.上拉加载 button
(1)wxml
<view wx:for="{{newses}}" class="list">{{item}}</view>
<button wx:if="{{hasMoreData}}" class="loading" loading>正在加载...</button>
<button wx:else class="loading">没有更多数据</button>
(2)wxss
.loading {
font-size: 14px;
color: #ccc;
background-color: #fff;
}
.list {
line-height: 120rpx;
}
(3)js
Page({
/**
* 页面的初始数据
*/
data: {
sources:['1','2','3','4','5','6','7','8','9','10','11','12'],
newses:[],
hasMoreData:true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
setTimeout(function(){
var sources = that.data.sources;
var newses = [];
for(var index=0;index<10;index++){
var news = sources[index];
newses.push(news)
}
that.setData({
newses:newses
})
},1000)
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
var that = this;
setTimeout(function(){
var newses = that.data.newses;
var newsesLength = newses.length;
var sources = that.data.sources;
var sourcesLength = sources.length;
if(newsesLength === sourcesLength){
that.setData({
hasMoreData:false
});
return;
};
var start = newsesLength;
var end = Math.min(start + 9,sourcesLength - 1);
for(var index = start;index <= end;index ++){
var news = sources[index];
newses.push(news)
}
that.setData({
newses:newses
})
},1000)
}
})
4.引用组件