首页 > 代码库 > 微信小程序开发之scroll-view

微信小程序开发之scroll-view

本文主要介绍通过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  },  onl oad: 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    })  },})


最近比较忙,就简单记录下

 

微信小程序开发之scroll-view