小程序实现左右滑动窗口(小程序实现分页效果)
类别:编程学习 浏览量: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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- ui小程序布局(AmazeUI 输入框组的示例代码)
- html5带图标下拉菜单(html5小程序飞入购物车抛物线绘制运动轨迹点)
- 微信小程序存token(小程序开发实现access_token统一管理)
- 苹果微信小程序页面空白(iPhoneX安全区域Safe Area底部小黑条在微信小程序和H5的屏幕适配)
- 小程序ui设计样式(AmazeUI 平滑滚动效果的示例代码)
- python编写的小程序(几个适合python初学者的简单小程序,看完受益匪浅!推荐)
- 微信小程序苹果部分内容打不开(微信小程序audio组件在ios端无法播放的解决办法)
- 微信小程序实现自动定位(微信小程序实现锚点定位功能的方法实例)
- 微信小程序js 抽奖概率(小程序实现筛子抽奖)
- 微信小程序做计算器(微信小程序实现计算器小功能)
- 微信小程序swiper大小调整(微信小程序swiper-dot中的点如何改成滑块详解)
- wx小程序请求封装(小程序wx.getUserProfile接口的具体使用)
- php关注公众号发送消息(php实现QQ小程序发送模板消息功能)
- 微信小程序单选框组件(微信小程序picker多列选择器mode = multiSelector)
- 微信小程序ui聊天窗口(微信小程序实现简单聊天室)
- python编写小程序实现密码验证(python实现扫描ip地址的小程序)
- 得这个 难治病 的人太多了,300个人赶到杭州商量怎么办(得这个难治病的人太多了)
- 经度,世界时间腕表的灵魂(世界时间腕表的灵魂)
- 阿里最新财报公布 三季度营收增长3 ,将增加150亿美元回购额度 在美股价小涨(阿里最新财报公布)
- 赵薇时胖时瘦 最近变美少女 原因在这里 躺着就变瘦(赵薇时胖时瘦最近变美)
- 学会这26种姿势,你就可以和兵哥哥切磋了(你就可以和兵哥哥切磋了)
- 吴彦祖陈冠希 恩怨 ,失去曾让他流泪的女友,终遇走过18年真爱(吴彦祖陈冠希恩怨)
热门推荐
- drools机制(Swoole实现异步投递task任务案例详解)
- linux常见命令vmstat(Linux stat命令的使用)
- css3如何添加图形(CSS3地图动态实例代码圆圈向外扩散)
- 服务器宝塔面板怎么安装(VPS安装宝塔面板+云锁过程记录)
- pythonopt用法(Python语言检测模块langid和langdetect的使用实例)
- sql 如何拆分字符串(SQL Server实现将特定字符串拆分并进行插入操作的方法)
- mysql自定义安装教程5.7(MySQL系列-源码编译安装v5.7.34)
- python 常用模块函数(Python OOP类中的几种函数或方法总结)
- 非托管资源的回收
- 终于有人将mysql 索引讲清楚了(MySQL 索引的一些细节分享)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9