本篇微信小程序开发教程将为大家讲解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

  },

  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

    })

  },

})

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

本文由职坐标整理并发布，希望对同学们学习微信开发的知识有所帮助。了解更多详情请关注职坐标微信开发频道!