微信小程序开发之scroll-view

简介: 本文主要介绍通过scroll-view实现回至顶部,如下效果 一、页面代码 顶部的工具栏放一个查找按钮,滚动区域实现分页,目的就是为了点击上一页\下一页时,自动回到顶部。 scroll-view必须指定scroll-y属性和该区域的高度 查找 ...

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


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

 

欢迎阅读本系列文章:微信小程序开发教程目录

 

相关文章
|
人工智能 小程序 前端开发
一个小程序轻量AR体感游戏,开发实现解决方案
针对青少年运动兴趣不足问题,AR体感游戏凭借沉浸式互动体验脱颖而出。结合小程序“AI运动识别”插件与WebGL渲染技术,可实现无需外设的轻量化AR健身游戏,如跳糕、切水果等,兼具趣味性与锻炼效果,适用于儿童健身及职工团建,即开即玩,低门槛高参与。
|
运维 小程序 数据可视化
小程序开发平台有哪些?SaaS小程序制作平台哪个好
小程序开发模式详解:自主开发、SaaS小程序制作平台与外包全对比 选择合适的小程序开发模式,是项目成功的基石。这三种模式在成本、周期、控制力和灵活性上各有千秋,适用于不同阶段和不同类型的企业。下面我们将逐一深入剖析。
1202 8
|
移动开发 小程序 前端开发
小程序开发平台有哪些?哪个好
小程序的开发方式丰富多元,开发团队可根据自身的技术背景、项目具体需求以及资源状况,灵活挑选最为适宜的开发路径。以下将详细介绍几种主流的小程序开发方式。
1068 1
|
移动开发 小程序 前端开发
小程序快速开发平台有哪些?
小程序开发并非“一刀切”,需结合技术储备、资金预算、时间规划及功能需求等多维度因素综合考量。以下为您详细拆解五种主流开发方案及其适用场景,助您精准匹配开发路径。
777 3
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
2895 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
移动开发 小程序 前端开发
小程序开发平台有哪些?小程序开发制作软件推荐
小程序开发方案全解析:5种主流方式与选择指南 小程序开发需根据技术能力、预算、时间及功能需求综合决策。以下为5种主流开发方案及适用场景分析:
26791 0
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
735 0
uni-halo + 微信小程序开发实录:我的第一个作品诞生记