本文主要介绍通过scroll-view实现回至顶部，如下效果
一、页面代码
顶部的工具栏放一个查找按钮，滚动区域实现分页，目的就是为了点击上一页\下一页时，自动回到顶部。
scroll-view必须指定scroll-y属性和该区域的高度
<view class="page">
<view class="swiper-tab border-top">
<view>
<text class='text-primary'>查找</text>
</view>
</view>
<view class="weui-panel weui-panel_access mt0 no_border">
<scroll-view scroll-y style="height:{{scrollHeight}}px;" scroll-top="{{scrollTop}}"> <view class="weui-panel__bd">
<block wx:for="{{listdata}}" wx:key="{{item.Id}}">
<navigator url="/pages/test/Show?id={{item.Id}}">
<view class="weui-media-box weui-media-box_text">
<view class="weui-media-box__desc">{{item.Desc}}</view>
</view>
</navigator>
</block>
</view>
<view class="weui-panel__ft">
<view class="weui-cell weui-cell_access weui-cell_link">
<view class="weui-cell__bd col-4 text-center" bindtap="prevPage">上一页</view>
<view class="weui-cell__bd col-4 text-center">
<picker bindchange='changePage' class="picker" value="{{currentPage-1}}" range="{{pageArray}}">
<view>
第{{pageArray[currentPage-1]}}页
</view>
</picker>
</view>
<view class="weui-cell__bd col-4 text-center" bindtap="nextPage">下一页</view>
</view>
</view>
</scroll-view>
</view>
</view>
二、脚本代码
scrollHeight是内容区域的高度，点击上一页\下一页时，回到顶部
Page({
data: {
limit: 10,
currentPage: 1,
total: 0,
pageArray: [],
scrollTop: 0,
scrollHeight: 0
},
onLoad: function (options) {
var that =this;
wx.getSystemInfo({
success: function (res) {
that.setData({ scrollHeight: res.windowHeight - 42 });
}
});
this.loadMainData();
},
loadMainData: function () {
this.tapMove();
//加载数据
},
onPullDownRefresh: function () {
this.prevPage();
},
setPages: function (count) {
var pages = new Array();
for (var i = 0; i < count; i++) {
pages.push(i + 1);
}
this.setData({ pageArray: pages });
},
prevPage: function () {
if (this.data.currentPage > 1) {
this.setData({ currentPage: this.data.currentPage - 1 });
this.loadMainData();
} else {
msg.showToast({ title: '当前是第一页', icon: 'info' });
}
},
nextPage: function () {
if (this.data.currentPage < (this.data.total / this.data.limit)) {
this.setData({ currentPage: this.data.currentPage + 1 });
this.tapMove();
this.loadMainData();
} else {
msg.showToast({ title: '当前是最后一页', icon: 'info' });
}
},
changePage: function (e) {
var page = parseInt(e.detail.value) + 1;
this.setData({ currentPage: page });
this.loadMainData();
},
tapMove: function (e) {
this.setData({
scrollTop:0
})
},
})
最近比较忙，就简单记录下