(一)小程序集成Bmob作为数据存储
(二)小程序中Flex布局
(三)小程序使用高德地图获取地理位置
(四)小程序列表条目点击
(五)小程序下拉刷新、上拉加载
(六)小程序总结
下拉刷新、上拉加载是使用比价多的一个功能,微信小程序有两种方式实现:
一、onPullDownRefresh 和 onReachBottom 方法实现
1、首先要在.json文件中设置属性
"enablePullDownRefresh": true
可以在app.json的window中设置全局属性,也可以在需要的页面.json中设置单个页面
2、页面上拉、下拉的处理函数
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log("下拉");
wx.showNavigationBarLoading();
that.setData({ page: 10, refresh: false })
that.onBmobRequest()
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log("上拉")
wx.showLoading({
title: 'loading...',
})
that.setData({ page: that.page + 10 })
that.onBmobRequest()
},
onBmobRequest: function () {
var Diary = Bmob.Object.extend("diary1");
var query = new Bmob.Query(Diary);
//对createdAt字段降序排列
query.descending("createdAt");
//分页查询
query.limit(that.data.page);
query.find({
success: function (results) {
var arr = [];
for (var i = 0; i < results.length; i++) {
arr.push(results[i]._serverData)
}
that.setData({ resultsData: arr, isRequest: true, refresh: true });
if (that.data.page == 10) {
wx.hideNavigationBarLoading();
// 停止下拉动作
wx.stopPullDownRefresh();
} else {
wx.hideLoading();
}
},
error: function (error) {
console.log("查询失败: " + error.code + " " + error.message);
}
});
二、scroll-view里设定bindscrolltoupper 和 bindscrolltolower实现
index1.js
bindRefresh: function () {
console.log("下拉...");
that.setData({ page: 10, refresh: false })
that.onBmobRequest()
},
bindLoadMore: function () {
console.log("上拉...");
that.setData({ page: that.page + 10, hidden: false })
that.onBmobRequest()
},
onBmobRequest: function () {
var Diary = Bmob.Object.extend("diary1");
var query = new Bmob.Query(Diary);
//对createdAt字段降序排列
query.descending("createdAt");
//分页查询
query.limit(that.data.page);
query.find({
success: function (results) {
// 循环处理查询到的数据
var arr = [];
for (var i = 0; i < results.length; i++) {
arr.push(results[i]._serverData)
}
that.setData({ resultsData: arr, isRequest: true, refresh: true });
if (that.data.page == 10) {
that.setData({ refresh: true })
} else {
that.setData({ hidden: true })
}
},
error: function (error) {
console.log("查询失败: " + error.code + " " + error.message);
}
});
}
index1.wxml
<!--index1.wxml-->
<view class="container" >
<view class='refresh' hidden='{{refresh}}'>
<text>下拉刷新...</text>
</view>
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true"
style='height:{{scrollHeight}}px;'
bindscrolltoupper="bindRefresh"
bindscrolltolower="bindLoadMore"
>
<view class='content-column' wx:for='{{resultsData}}' wx:key=''>
<view class='content-row' >
<view class='left'>
<image class='avatar' src='{{item.avatarUrl}}' ></image>
</view>
<view class='right'>
<text class='nikeName'>{{item.nickName}}</text>
<text class='think'>{{item.think}}</text>
<view class='images'>
<image src='{{item}}' class='image-item' mode='aspectFill' wx:for='{{item.photo}}' wx:key=''></image>
</view>
<text class='address-item'>{{item.address}}</text>
<text class='date-item'>{{item.date}}</text>
</view>
</view>
</view>
</scroll-view>
<view>
<loading hidden="{{hidden}}">加载中...</loading>
</view>
</view>
查看官方文档,scroll-view就是里面内容有各种滑动触发事件的DIV容器,比如触底、触顶、滚动条滚动。
其中的几个属性
scroll-top : 设置滚动条的位置
scroll-y :是否允许竖向滑动,
height : 是组件的高度
bindscrolltolower : 是绑定触底触发的事件
bindscrolltoupper : 触顶触发的事件,由于是触顶触发事件,不太合适用来做下拉刷新