欢迎光临,了解微信小程序开发,就上易用通!

当前位置 : 易用通 > 小程序模板
微信小程序实用组件:右侧字母检索,例子(体验杠杠的)微信小程序实用组件:右侧字母检索,例子(体验杠杠的)
立即下载

微信小程序实用组件:右侧字母检索,例子(体验杠杠的)

模板分类 : 小程序模板 模板编号 : Y244 源码文件 : 完全开源 下载权限 : VIP会员
模板大小 :  模板指数 :  更新时间 : 2018-01-16 17:08 模板等级 : ☆☆☆☆☆

模板截图:

在做这个的时候,在论坛找了两个相关的的例子,体验不很好,所有就直接写了一个demo 提升体验的第一步就是要用scroll-view 标签 把他们包裹起来不让他们可以滚动,当你在右侧上下摩擦的时候,发现左侧在滚动,是多么的不开心 还有一定使用左右结构,不能直接把字母定位在页面右侧 还有一个最重要的也就是困扰楼主一会儿,就是一定要给 scroll-view 设置高,或许聪明的你们 不会像楼主一样 傻不拉几的找不到为什么设置了 scroll-into-view 的值却不滚动。  微信小程序实用组件:右侧字母检索,例子(体验杠杠的)(图1)  微信小程序实用组件:右侧字母检索,例子(体验杠杠的)(图2)  好了直接上代码
  1. <scroll-view class=\"flex-wrap\">
  2.     <scroll-view class=\"flex-left\" scroll-y=\"true\" scroll-into-view=\"{{scrollIntoId}}\">
  3.         <view wx:for=\"{{groups}}\" wx:key=\"zimu\" wx:for-item=\"zimu\">
  4.             <view class=\"item item-a\" id=\"{{zimu.groupName}}\">{{zimu.groupName}}</view>
  5.             <view class=\"item\" wx:for=\"{{zimu.users}}\" wx:key=\"user\" wx:for-item=\"user\">{{user.name}}</view>
  6.         </view>  
  7.         <navigator url=\"../project/projectlist\" open-type=\"switchTab\">go</navigator>
  8.     </scroll-view>
  9.     <view class=\"flex-right\">
  10.         <view class=\"zimulist\" bindtouchmove=\"touchmovefn\" bindtouchstart=\"touchstartfn\">
  11.             <view class=\"zimu\" wx:for=\"{{zimu}}\" wx:key=\"ABC\" data-id=\"{{item}}\">{{item}}</view>
  12.         </view>
  13.     </view>
  14. </scroll-view>
复制代码
  1. page{
  2.   height: 100%;
  3. }
  4. .zimu{
  5.   width: 50rpx;
  6.   height: 20px;
  7.   line-height: 20px;
  8. }
  9. .zimulist{
  10.   position: fixed;
  11.   top: 0;
  12.   right: 0;
  13.   bottom:0;
  14.   width: 50rpx;
  15.   z-index: 999999999999;
  16.   background-color: #fff;
  17.   text-align: center;
  18. }
  19. .item{
  20.   height: 88rpx;
  21.   line-height: 88rpx;
  22.   border-bottom: solid 1rpx #f0f1f2;
  23.   padding-left: 10rpx;
  24. }
  25. .item-a{
  26.   background-color: #f0f1f2;
  27. }
  28. .flex-wrap{
  29.   display: flex;
  30.   flex-direction: row;
  31.   width: 100%;
  32.   height: 100%;
  33. }
  34. .flex-left{
  35.   width: 700rpx;
  36.   height: 100%;
  37. }
  38. .flex-right{
  39.   width: 50rpx;
  40.   height: 100%;
  41. }
复制代码
js里有个计算 被除以 20 ,20是根据 wxss 里一个字母高度 最好以px 为单位,不然还得区转换,这也是楼主的wxss 里其他都用的rpx;唯独这里使用了px;
  1. Page({
  2.   data: {
  3.     zimu:[\'A\',\'B\',\'C\',\'D\',\'E\',\'F\',\'G\',\'H\',\'I\',\'J\',\'K\',\'M\',\'N\',\'O\',\'P\',\'Q\',\'R\',\'S\',\'T\',\'U\',\'V\',\'W\',\'X\',\'Y\',\'Z\'],
  4.     scrollIntoId:\'A\',
  5.     groups: [{
  6.       groupName: \'A\',
  7.       users: [
  8.         {
  9.           name: \'阿码\',
  10.           avatar: \'../../images/avatar.png\'
  11.         }
  12.       ]
  13.     },
  14.     {
  15.       groupName: \'B\',
  16.       users: [
  17.         {
  18.           name: \'白娘子\',
  19.           avatar: \'../../images/avatar.png\'
  20.         },
  21.         {
  22.           name: \'包天齐\',
  23.           avatar: \'../../images/avatar.png\'
  24.         }
  25.       ]
  26.     },
  27.     {
  28.       groupName: \'C\',
  29.       users: [
  30.         {
  31.           name: \'陈大年\',
  32.           avatar: \'../../images/avatar.png\'
  33.         },
  34.         {
  35.           name: \'丛云山\',
  36.           avatar: \'../../images/avatar.png\'
  37.         },
  38.         {
  39.           name: \'崔鸣贵\',
  40.           avatar: \'../../images/avatar.png\'
  41.         }
  42.       ]
  43.     },
  44.     {
  45.       groupName: \'D\',
  46.       users: [
  47.         {
  48.           name: \'邓牛牛\',
  49.           avatar: \'../../images/avatar.png\'
  50.         },
  51.         {
  52.           name: \'刁仁衣\',
  53.           avatar: \'../../images/avatar.png\'
  54.         },
  55.         {
  56.           name: \'杜长城\',
  57.           avatar: \'../../images/avatar.png\'
  58.         }
  59.       ]
  60.     },
  61.     {
  62.       groupName: \'F\',
  63.       users: [
  64.         {
  65.           name: \'范长龙\',
  66.           avatar: \'../../images/avatar.png\'
  67.         },
  68.         {
  69.           name: \'冯肖晓\',
  70.           avatar: \'../../images/avatar.png\'
  71.         }
  72.       ]
  73.     },
  74.     {
  75.       groupName: \'G\',
  76.       users: [
  77.         {
  78.           name: \'甘地\',
  79.           avatar: \'../../images/avatar.png\'
  80.         },
  81.         {
  82.           name: \'高墙\',
  83.           avatar: \'../../images/avatar.png\'
  84.         },
  85.         {
  86.           name: \'宫都举\',
  87.           avatar: \'../../images/avatar.png\'
  88.         }
  89.       ]
  90.     },
  91.     {
  92.       groupName: \'H\',
  93.       users: [
  94.         {
  95.           name: \'何芸\',
  96.           avatar: \'../../images/avatar.png\'
  97.         },
  98.         {
  99.           name: \'胡坨坨\',
  100.           avatar: \'../../images/avatar.png\'
  101.         },
  102.         {
  103.           name: \'黄坨坨\',
  104.           avatar: \'../../images/avatar.png\'
  105.         }
  106.       ]
  107.     },
  108.     {
  109.       groupName: \'T\',
  110.       users: [
  111.         {
  112.           name: \'谭老头儿\',
  113.           avatar: \'../../images/avatar.png\'
  114.         },
  115.         {
  116.           name: \'汤云西\',
  117.           avatar: \'../../images/avatar.png\'
  118.         },
  119.         {
  120.           name: \'图图\',
  121.           avatar: \'../../images/avatar.png\'
  122.         }
  123.       ]
  124.     },
  125.     {
  126.       groupName: \'X\',
  127.       users: [
  128.         {
  129.           name: \'夏一天\',
  130.           avatar: \'../../images/avatar.png\'
  131.         },
  132.         {
  133.           name: \'鲜轰轰\',
  134.           avatar: \'../../images/avatar.png\'
  135.         },
  136.         {
  137.           name: \'谢大佩\',
  138.           avatar: \'../../images/avatar.png\'
  139.         }
  140.       ]
  141.     }
  142.     ]
  143.   },
  144.   touchmovefn:function(e){ // 右侧字母检索
  145.   //console.log(e.changedTouches)
  146.     var letterIndex = e.changedTouches[\'0\'].pageY /20
  147.     // console.log(e)
  148.     // console.log(letterIndex)
  149.     var index = parseInt(letterIndex)
  150.     //console.log(index)
  151.     var letter = this.data.zimu[index]
  152.     //console.log(letter)
  153.      this.setData({
  154.       scrollIntoId:letter
  155.     })
  156.     wx.showToast({
  157.       title:letter
  158.     })
  159.   },
  160.   touchstartfn:function(e){
  161.     //console.log(e.target.id)
  162.     console.log(e);
  163.     var letter = e.target.dataset.id
  164.     this.setData({
  165.       scrollIntoId:letter
  166.     })
  167.      wx.showToast({
  168.       title:letter
  169.     })
  170.   }
  171. })
复制代码
在打开的时候,楼主发现,在楼主的低端机上(华为荣耀6)如果是白板就用手在屏幕上上下摩擦一下就出来了,不摩擦却要等一会儿,在同事的高大上的ipone6+上却没有这样的情况,不知各位道友遇到类似的情况

加入收藏
立即下载
分享到微信朋友圈
X

免责声明:

1. 本站所有素材(未指定商用),仅限学习交流,请勿用于商业用途。
2. 本站所有小程序模板Demo和图片均来自用户分享上传和网络收集,模板和图片版权归原作者及原出处所有。
3. 未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材。