【微信小程序】手写索引选择器(城市列表,汽车…
2019-08-14 09:48:28来源:博客园 阅读 ()
摘要: 小程序索引选择器,点击跳转相应条目,索引可滑动,滑动也可跳转
场景:城市选择列表, 汽车品牌选择列表
所用组件: scroll-view(小程序原生) https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
1 list: [ 2 { 3 "letter": "A", 4 "list": [{ 5 "name": "奥迪1", 6 "id": 1 7 }, 8 { 9 "name": "奥迪2", 10 "id": 2 11 }] 12 }, 13 { 14 "letter": "B", 15 "list": [{ 16 "name": "宝马1", 17 "id": 3 18 }, 19 { 20 "name": "宝马2", 21 "id": 4 22 }] 23 }, 24 { 25 "letter": "C", 26 "list": [{ 27 "name": "麻喇沙底", 28 "id": 5 29 }, 30 { 31 "name": "adidas", 32 "id": 6 33 }] 34 }, 35 { 36 "letter": "D", 37 "list": [{ 38 "name": "煲事件", 39 "id": 7 40 }, 41 { 42 "name": "保时捷", 43 "id": 8 44 }] 45 }, 46 { 47 "letter": "E", 48 "list": [{ 49 "name": "宝马1", 50 "id": 9 51 }, 52 { 53 "name": "宝马2", 54 "id": 10 55 }] 56 }, 57 { 58 "letter": "F", 59 "list": [{ 60 "name": "宝马1", 61 "id": 11 62 }, 63 { 64 "name": "宝马2", 65 "id": 12 66 }] 67 }, 68 { 69 "letter": "G", 70 "list": [{ 71 "name": "宝马1", 72 "id": 15 73 }, 74 { 75 "name": "宝马2", 76 "id": 16 77 }] 78 }, 79 { 80 "letter": "H", 81 "list": [{ 82 "name": "宝马1", 83 "id": 17 84 }, 85 { 86 "name": "宝马2", 87 "id": 18 88 }] 89 }, 90 { 91 "letter": "I", 92 "list": [{ 93 "name": "宝马1", 94 "id": 19 95 }, 96 { 97 "name": "宝马2", 98 "id": 20 99 }] 100 }, 101 { 102 "letter": "J", 103 "list": [{ 104 "name": "宝马1", 105 "id": 21 106 }, 107 { 108 "name": "宝马2", 109 "id": 22 110 }] 111 }, 112 { 113 "letter": "K", 114 "list": [{ 115 "name": "宝马1", 116 "id": 23 117 }, 118 { 119 "name": "宝马2", 120 "id": 24 121 }] 122 }, 123 ]
html 结构:
主体部分
1 <scroll-view class="content" scroll-y="true" :style="scrollHeight" :scroll-top="scrollData.scrollTop" :scroll-into-view="toView"> 2 <ul class="brandList"> 3 <li v-for="(item, index) in list" :key="index" :id="item.letter"> 4 <h2>{{item.letter}}</h2> 5 <div v-for="(el, i) in item.list" :key="i" class="pro" @click="getToast(el.name)"> 6 <img src="/static/images/user.png" alt="" mode="aspectFit"> 7 <span>{{el.name}}</span> 8 </div> 9 </li> 10 </ul> 11 </scroll-view>
1 // 侧边导航栏 2 <div class="letterList" @touchstart="handlerTouchMove" 3 @touchmove="handlerTouchMove" 4 @touchend="handlerTouchEnd" :style="fixedTop"> 5 <p v-for="(item, index) in list" :key="index" @click="getLetter(item.letter)">{{item.letter}}</p> 6 </div>
scrollData: {
scrollTop: 0,
},
toView:'A',
step1:
首先,侧边导航栏肯定是用fixed定位固定(一般在右侧),其次在竖直方向居中,调用wx.getSystemInfo
1 let fixedTop = 0; 2 let length = this.list.length // 取到list数组的length,因为list的length决定了侧边导航的高度 3 wx.getSystemInfo({ 4 success(res) { 5 fixedTop = (res.windowHeight - (20 * length))/2 //20为侧边导航每个p的高度 6 } 7 })
step2
手指在侧边导航滑动时的js
1 handlerTouchMove (e) { 2 let touches = e.touches[0] || {} 3 let pageY = touches.pageY 4 let rest = pageY - this.fixedTop 5 let index = Math.ceil(rest / 20) 6 console.log(this.list.length, index, 206); 7 console.log(index,195);
8 if(index > this.list.length) { 9 index = this.list.length - 1// 10 } 11 if( 0 <index <= this.list.length) { // 1213 10 9 12 index = index - 1 13 } 14 if(index <= 0) { 15 index = 0 16 } 17 let letter = this.list[index].letter 18 wx.showToast({ 19 title: letter, 20 icon: 'none', 21 duration: 2000 22 }) 23 this.toView = letter 24 }, 25 handlerTouchEnd () { 26 wx.hideLoading() 27 },
step3
点击侧边索引时的js
1 getLetter (letter) { 2 this.toView = letter 3 },
结束惹,88, 下次见
是
原文链接:https://www.cnblogs.com/yfgg/p/11202750.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 如此沙雕的代码注释,原来程序员都是段子手 2020-06-08
- 还在羡慕程序员工资高吗?看完这篇前端学习计划,你也可以拿 2020-05-23
- 想成为一个高薪WEB前端程序员,这些书籍你要看 2020-05-22
- 1W2以下前端程序员该如何面对现实?我这有一套让你提升的方 2020-05-22
- 在web开发中,为什么前端比后端更得到转行程序员的青睐?必 2020-05-15
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash