小程序实现左右滑动窗口(小程序实现分页效果)
类别:编程学习 浏览量:2997
时间:2022-01-23 02:46:35 小程序实现左右滑动窗口
小程序实现分页效果本文实例为大家分享了小程序实现分页效果展示的具体代码,供大家参考,具体内容如下
<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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- uni app 小程序全局样式没法用(uniapp封装小程序雷达图组件的完整代码)
- python编写小程序实现密码验证(python实现扫描ip地址的小程序)
- 微信小程序引用模板的函数(微信小程序页面与组件之间信息传递与函数调用)
- 微信小程序如何请求服务器数据(微信小程序学习笔记之页面配置与路由方式)
- ih5如何点击按钮跳转至网页(HTML5跳转小程序wx-open-launch-weapp的示例代码)
- 微信小程序单选框组件(微信小程序picker多列选择器mode = multiSelector)
- 微信小程序scrollview 截图(微信小程序scroll-view不能左右滑动问题的解决方法)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- ui小程序布局(AmazeUI 输入框组的示例代码)
- 微信小程序做计算器(微信小程序实现计算器小功能)
- 微信小程序开发如何实现自动保存(微信小程序开发实用技巧之数据传递和存储)
- 微信小程序日期选择器有星期天(微信小程序 滚动选择器时间日期详解及实例代码)
- 聊天室python小程序(用Python写一个模拟qq聊天小程序的代码实例)
- 微信小程序多人编辑表格(微信小程序实现固定表头、列表格组件)
- 微信小程序计数器代码(微信小程序实现计算器案例)
- python简易翻译器的运行(Python3.6实现带有简单界面的有道翻译小程序)
- 一个30岁男人外遇失败的全过程(一个30岁男人外遇失败的全过程)
- 《无敌破坏王2》 不聊彩蛋,聊聊我从动画里看到的现实那些事儿(无敌破坏王2不聊彩蛋)
- 《寄生虫》 三观不正 人类悲欢从来不相通,感同身受也并非本能(寄生虫三观不正)
- 这部动漫中的女孩子,可比101女孩更加励志(这部动漫中的女孩子)
- 《白狐的人生》热拍 贾征宇偶像包袱难自弃 图(白狐的人生热拍)
- 七夕取消了,牛郎织女没做核酸七夕已经取消(牛郎织女没做核酸七夕已经取消)
热门推荐
- 9小时搞定微信小程序开发(关于加快微信小程序开发的一些小建议)
- 手机无法与服务器建立安全连接(ftp无法与服务器建立连接)
- sql取整数函数(SQL中位数函数实例)
- javascript如何实现异步任务(JavaScript 中如何实现并发控制)
- sql server 进阶教程(SQL Server游标的介绍与使用)
- docker compose 与docker区别(windows安装Docker与docker-compose套装的详细教程)
- mysql用户删除了如何设置(MySQL两种删除用户语句的区别delete user和drop user)
- wampserver怎么进后台(WampServer下使用多端口访问的技巧)
- thinkphp怎么输出二维值(thinkphp 表名 大小写 窍门)
- jquery.ajax error 如何调试错误
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9