小程序实现分页效果

2024-12-26 03:36:21

本文实例为大家分享了小程序实现分页效果展示的具体代码，供大家参考，具体内容如下

<view class="pages_box">
  <view bindtap="pagesFn" class="{{pagesNum==0?'active':''}}" data-type="0">上一页</view>
  <block wx:for="shujuDataArr11111" wx:key="index" wx:if="{{index+1<4}}">
    <view wx:if="{{tyindex+index <=maxPages}}" bindtap="pagesFn" class="{{pagesNum==tyindex+index?'active':''}}" data-type="{{tyindex+index}}">{{tyindex+index}}</view>
  </block>
  <view bindtap="pagesFn" class="{{pagesNum==-1?'active':''}}" data-type="-1">下一页</view>
</view>

js：

// pages/ceshiPages/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    pagesNum:1,
    maxPages:15,//分页总数量
    tyindex:1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
    pagesFn:function(e){
    let type = e.currentTarget.dataset.type;
    let _that = this;
    if(typeof type == "string"){//上下页
      if(type == "previous_page"){//上一页
        if(_that.data.pagesNum-1 >0){
          _that.setData({
            pagesNum:_that.data.pagesNum-1,
            tyindex:_that.data.pagesNum-1,
          })
        }
        console.log(_that.data.pagesNum)
      }else{//下一页
        if(_that.data.pagesNum+1 <= _that.data.maxPages){
          if((_that.data.pagesNum+1)%3 == 0){
            _that.setData({
              tyindex:_that.data.pagesNum+1,
            })
          }
          _that.setData({
            pagesNum:_that.data.pagesNum+1,
          })
          console.log(_that.data.pagesNum)
        }
      }
    }else{
      console.log(_that.data.pagesNum)
      if(type>_that.data.pagesNum){
        if(type <= _that.data.maxPages){
          _that.setData({
            tyindex:type,
            pagesNum:type,
          })
        }
      }
      if(type<_that.data.pagesNum){
        if(type >=1){
          _that.setData({
            tyindex:type,
            pagesNum:type,
          })
        }
      }
      console.log(_that.data.pagesNum)
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

CSS：

/* pages/ceshiPages/index.wxss */
.pages_box{
  margin-top: 20rpx;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: flex-start;
  flex-wrap: nowrap;
}
.pages_box>view{
  line-height: 60rpx;
  font-size: 30rpx;
  border: 1px solid #A0A0A0;
  background-color: #F7F7F7;
  display: inline-block;
  padding: 0 25rpx;
  margin-left: 12rpx;
  color: #64646C;
  border-radius: 10rpx;
}
.pages_box>view.active{
  background-color: #FCD821;
  border-color: #F39800;
}
.pages_box>view:last-child,.pages_box>view:first-child{
  border-radius: 60rpx;
  padding: 0 30rpx;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序云开发实现数据添加、查询和分页

本文实例为大家分享了微信小程序云开发实现数据添加.查询和分页,供大家参考,具体内容如下实现的效果实现要点 WXML 不同类别数据的显示通过 if-elif-else 实现,在wxml文件中通过 <block></block>渲染,因为它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性.也就是说可以通过属性来控制页面是否要渲染这部分的内容,可以减少页面渲染时间. 云开发数据的获取先开通云开发功能 ,参考官方文档,然后在创建项目的时候勾选上使用云开发模板(看个人吧,
微信小程序实战之上拉（分页加载）效果（2）

上拉加载(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的角度来考虑,后台不要一次性返回所有数据,当用户有需要再往下翻的时候,再加载更加数据出来. 业务需求: 列表滚动到底部时,继续往上拉,加载更多内容必备参数: (1)pageindex: 1 //第几次加载 (2)callbackcount: 15 //需要返回数据的个数其他参数: 根据接口的所需参数
微信小程序实现移动端滑动分页效果（ajax）

一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面. 实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加在当前页面. /* *<div class='topicBox' id='listBox'> *</div> */ //判断元素是否进入可视区域 function see(objLiLast) { //浏览器可视区域的高度 var see = document.documentElemen
小程序分页实践之编写可复用分页组件

项目中遇到 tab切换列表,每个tab都需要分页的需求,分页流程具有相似性,于是想将分页封装为组件,方便应用. 组件的应用已写成一个小demo,效果如下图所示(数据用mock模拟): 源码可以查看:wxapp-pagination 项目需求具体项目需求: 查看自己相关的会议(页面命名为 meetings) tab切换,分为: "我的会议"(我参加的会议,后面会以 "join" 为 key区分) "我的预约"(我预约的会议,后面会以 "
微信小程序模板之分页滑动栏

本文实例为大家分享了微信小程序分页滑动栏的具体代码,供大家参考,具体内容如下功能: 1.分页栏与滑动视图绑定 2.点击分页栏自动滑动到对应视图 3.滑动的到视图对应分页栏自动显示选中样式效果图上代码 wxml <view class="tapNav"> <view class="{{tabArr.tabCurrentIndex==0?'active':''}}" data-index="0" bindtap="v
微信小程序实现分页加载效果

分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验.那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能. 数据来自于后端(lumen带分页) /** * @todo 获取订单列表 * @return mixed */ public function getOrderList(){ $field = ['id','order_no','name','created_at','d
微信小程序分页加载的实例代码

整理文档,搜刮出一个微信小程序分页加载的代码,稍微整理精简一下做下分享. 分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验.那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能.照例先上源码及效果图. 源码传送门要实现这样的功能,一般需要在请求数据时加入当前请求页数,以及页的大小(每页显示的数量)也有一部分接口是通过请求的开始偏移量和结束偏移量请求数据,例如你一页显示10条
微信小程序之搜索分页功能的实现代码

直接上代码: wxml: <wxs src="../wxs/changeimg.wxs" module="changeimg" /> <view class="container"> <view class="search_input"> <image class="back" src="" mode="widthFix"&g
小程序实现分页效果

本文实例为大家分享了小程序实现分页效果展示的具体代码,供大家参考,具体内容如下 <view class="pages_box"> <view bindtap="pagesFn" class="{{pagesNum==0?'active':''}}" data-type="0">上一页</view> <block wx:for="shujuDataArr11111"
微信小程序 tabs选项卡效果的实现

微信小程序 tabs选项卡效果前言: 最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三
微信小程序五星评分效果实现代码

微信小程序五星评分效果实现代码很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,发出来分享一下: 我写的是5分满分制的,首先,准备3个图片, ,像这样的,分别代表分数为0,0.5,1 时的状态, 效果图:(以3.5为例) 然后上代码: js: function pingfenxing(pingfen){ var that=this, //这里是图片的路径,自己需要改 data={ ling:"img/pingfen0.png", zheng:"img/pi
微信小程序实现日历效果

本文实例为大家分享了微信小程序实现日历效果的具体代码,供大家参考,具体内容如下效果预览: wxml部分: <view class='box1' style='width: {{ sysW * 7 }}px'> <view class='dateBox'>{{ year }} - {{ month}}</view> <block wx:for='{{ weekArr }}'> <view style='width: {{ sysW }}px; heig
微信小程序实现选项卡效果

本文实例为大家分享了微信小程序实现选项卡效果展示的具体代码,供大家参考,具体内容如下 demo.wxss .swiper-tab{ width: 100%; border-bottom: 2rpx solid #777777; text-align: center; line-height: 80rpx;} .swiper-tab-list{ font-size: 30rpx; display: inline-block; width: 33.33%; color: #777777; } .on
小程序卡片切换效果组件wxCardSwiper的实现

wxCardSwiper 小程序卡片切换效果组件. 支持异步添加卡片数据, 手势滑动触发. 源码地址: https://github.com/doterlin/wxCardSwiper 使用方法将本项目文件中的components/cardSwiper文件夹复制到你项目的目录下,然后在页面的json配置及页面引入.自定义组件的引入和使用请参考官方文档. 本项目包含组件和页面demo,可直接运行(上滑翻到下一张,下滑回到上一张). 参数 data Array 传入的初始数据数组 loadmore
微信小程序实现走马灯效果实例

前言日常开发中,我们经常会遇到文字横向循环滚动的效果,俗称走马灯,也是项目中经常会使用的一个功能.在网页web前端很常见,今天就介绍下小程序的实现方式,一种是用的css样式实现,另一种是运用小程序的动画功能实现. @keyframes 实现利用@keyframes的规则来实现,非常方便,只需要css样式就可以满足,使用方法跟web上一样. <view class="marquee"> <text>这是一段滚动的文字</text> </vie
微信小程序实现九宫格效果

本文实例为大家分享了微信小程序实现九宫格效果的具体代码,供大家参考,具体内容如下 1.九宫格实现示例图: Tips: 说明: 使用 display: -webkit-flex;对布局做兼容. 保证每排三个图标的两对对齐,采用:justify-content: space-between;属性. 父元素必须设置 flex-wrap: wrap;属性进行换行,否则会在一排展示. 个子元素的宽度width: 33.33333333%;按照其占位大小分配. 使用justify-content:cente
uniapp实现微信小程序的电子签名效果(附demo)

目录 1.标签和样式 2.横屏切换 3.绘图 3.1.初始化数据会吧? 3.2.触摸开始时获取起点,会吧? 3.3.触摸移动获取路径点,会吧? 3.4.触摸结束,将未绘制的点清空防止对后续路径产生干扰,简单吧? 3.5.绘制笔迹,没得问题吧? 4.扫尾处理画布可以做很多事情,比如可以绘图,也可以做海报.在这里只是想拿它来的实现亲笔签名,开启不一样的亲笔签名姿势. 开发框架:uniapp开发语言:vue2展示平台:微信小程序(实际可以兼容多个平台) 标签和样式没什么好说的,这里绘制了简单的页面,
微信小程序实现分页查询详解

目录创建自定义连接器云开发介绍分页实现思路使用连接器为什么要自定义分页功能日常小程序经常需要分页查询的功能,本篇我们讲解一下低代码中如何实现分页查询的功能.要自己开发分页功能,可以先参考官方的方法分页查询我们一般是需要有入参和出参,入参分别需要页码.每页大小.排序字段名称.排序方式.查询条件. 出参分别需要记录总条数.页码.每页大小.记录列表. 入参和出参知道之后,那在哪写代码呢?像分页这种功能一般属于后端的能力,低码工具中是在自定义连接器里写后端代码的. 创建自定义连接器登录低

小程序实现分页效果

相关推荐

随机推荐