本文主要介绍通过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 }) }, })
最近比较忙,就简单记录下
欢迎阅读本系列文章:微信小程序开发教程目录