兴国资源网 Design By www.nnzcdc.com
效果图:
一、简介
自己的小程序需要实现这样的功能
1.核心思想
swiper 和scroll-view共用两个变量currentTab navScrollLeft,当点击nav或者滑动swiper时设置两个变量的值为当前的index
二、实现
tab导航栏使用<scroll-view>标签,内容使用<swiper>
1.wxml实现
<view class="container"> <!-- tab导航栏 --> <!-- scroll-left属性可以控制滚动条位置 --> <!-- scroll-with-animation滚动添加动画过渡 --> <!-- scroll-x="true" navScrollLeft: 0初值 navData:tab text 使用 wx:for-item 可以指定数组当前元素的变量名, 使用 wx:for-index 可以指定数组当前下标的变量名: --> <!--tabs --> <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}"> <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx"> <!-- 判断是否选中,选中设置样式 --> <!-- switchNav --> <view class="nav-item {{currentTab == idx " data-current="{{idx}}" bindtap="switchNav"> {{navItem.text}}</view> </block> </scroll-view> <!-- 页面内容 --> <!-- duration="300":滑动动画时长 --> <!-- switchTab --> <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab"> <swiper-item wx:for="{{[0,1,2,3,4,5,6]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content"> {{tabItem}} </swiper-item> </swiper> </view>
2.js实现
//index.js //获取应用实例 const app = getApp() Page({ data: { navData:[ { text: '新闻' }, { text: '表白' }, { text: '外卖' }, { text: '当家教' }, { text: '找家教' }, { text: '租房子' }, { text: '驾校' } ], currentTab: 0, navScrollLeft: 0 }, //事件处理函数 onLoad: function () { }, switchNav(event){ // 获取当前tab 的id var cur = event.currentTarget.dataset.current; //每个tab选项宽度占1/5 var singleNavWidth = this.data.windowWidth / 5; //tab选项居中 this.setData({ navScrollLeft: (cur - 2) * singleNavWidth }) // 判断id是否和点击的tab id 一致 if (this.data.currentTab == cur) { return false; } else { this.setData({ currentTab: cur }) } }, switchTab(event){ var cur = event.detail.current; var singleNavWidth = this.data.windowWidth / 5; this.setData({ currentTab: cur, navScrollLeft: (cur - 2) * singleNavWidth }); } })
3.wxss实现
/**index.wxss**/ page { width: 100%; height: 100%; } .container { width: 100%; height: 100%; } .nav { /* 设置tab-nav宽高度 */ height: 80rpx; width: 100%; /* 假如您需要并排放置两个带边框的框, 可通过将 box-sizing 设置为 "border-box"。 */ box-sizing: border-box; overflow: hidden; /* 居中 */ line-height: 80rpx; background: #f7f7f7; font-size: 16px; /* 规定段落中的文本不进行换行: */ white-space: nowrap; position: fixed; top: 0; left: 0; z-index: 99; } .nav-item { width: 20%; display: inline-block; text-align: center; } .nav-item.active { color: green; } .tab-box { background: rgb(31, 201, 96); /* 这里设置成nav的高度 */ padding-top: 80rpx; height: 100%; box-sizing: border-box; } .tab-content { /* 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话: */ overflow-y: scroll; }
三、参考和总结
此文章参考 https://www.jb51.net/article/169290.htm
解决过程
1.tab的宽度固定为1/5,可以改进成根据tab的内容变化
四、优化
0.效果图
1.每个tab长度自适应 2.先前隔tab点击时
如果当前处于1,点击3时,路径时1-2-3,真机测试后,会直接跳转3,不会影响体验
// *******************************导航栏选择获取id和导航栏的位置************************************** tabSelect(e) { console.log("结果:", e); // 操作新闻数据库 var cur = e.currentTarget.dataset.id; //tab选项居中 this.setData({ // 每一个tab的id TabCur: e.currentTarget.dataset.id, //自适应 scrollLeft: (e.currentTarget.dataset.id) * 60, }) // 判断id是否和点击的tab id 一致 if (this.data.currentTab == cur) { return false; } else { this.setData({ currentTab: cur }) } console.log(e.currentTarget.dataset.id); console.log(this.data.TabCur); console.log("横向滚动条位置", this.data.scrollLeft); }, switchTab(e) { console.log(e); var cur = e.detail.current; this.setData({ TabCur: cur, scrollLeft: cur * 60, }); }
兴国资源网 Design By www.nnzcdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
兴国资源网 Design By www.nnzcdc.com
暂无评论...
更新日志
2024年05月20日
2024年05月20日
- 张琍敏1978-雪中莲[台湾复刻版][WAV+CUE]
- 叶蕴仪1993-睡美人[日本版][WAV+CUE]
- 夜晚助兴音乐-群星《新时代床头音乐-性能量》2CD[WAV]
- 24K德国HD金碟《历届奥斯卡获奖金曲》3CD[WAV整轨]
- 邰正宵《重燃爱恋 贰 Walk On》[FLAC/分轨][431.72MB]
- 苏文劭《雨停出来走走》[320K/MP3][81.11MB]
- 苏文劭《雨停出来走走》[FLAC/分轨][210.76MB]
- 群星《2024好听新歌04》十倍音质WAV分轨
- 陈宁《弹指之间HQ》头版限量[低速原抓WAV+CUE]
- 陈宁《故人还》HQCDII限量签名版[低速原抓WAV+CUE]
- 苏文劭《春曲(Lessons)》[320K/MP3][39.8MB]
- 苏文劭《春曲(Lessons)》[FLAC/分轨][97.78MB]
- 群星《2006香港高级视听展原音精选 SACD》[ISO][2G]
- 张琍敏1977-枫林小雨[台湾复刻版][WAV+CUE]
- 林一峰2014-COOKINGMUSIC[香港首版][WAV+CUE]