用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

右侧字母检索,例子(体验杠杠的)

天下雪 2017-1-21 10:55

在做这个的时候,在论坛找了两个相关的的例子,体验不很好,所有就直接写了一个demo 提升体验的第一步就是要用scroll-view 标签 把他们包裹起来不让他们可以滚动,当你在右侧上下摩擦的时候,发现左侧在滚动,是多么 ...

在做这个的时候,在论坛找了两个相关的的例子,体验不很好,所有就直接写了一个demo 
提升体验的第一步就是要用scroll-view 标签 把他们包裹起来不让他们可以滚动,当你在右侧上下摩擦的时候,发现左侧在滚动,是多么的不开心 
还有一定使用左右结构,不能直接把字母定位在页面右侧

还有一个最重要的也就是困扰楼主一会儿,就是一定要给 scroll-view 设置高,或许聪明的你们 不会像楼主一样 傻不拉几的找不到为什么设置了 scroll-into-view 的值却不滚动。 
QQ截图20170121092125.pngQQ截图20170121092057.png 
好了直接上代码

  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. 赞赏
    鲜花
    鲜花
    鸡蛋
    鸡蛋
    分享至 : QQ空间
    收藏
    原作者: Gavin

    相关阅读