码迷,mamicode.com
首页 > 微信 > 详细

微信小程序通讯录首字母索引效果,车辆品牌选择列表

时间:2019-03-02 00:51:00      阅读:814      评论:0      收藏:0      [点我收藏+]

标签:play   通讯录   mamicode   app   lex   secret   osi   程序   XML   

效果图:

技术图片

 

wxml代码:

  <block wx:for="{{list}}">
  <view class=‘letter‘ id="letter{{index}}">{{index}}</view>
  <view class=‘item‘ wx:for="{{item}}" wx:for-item="idx">
  {{idx.name}}
  </view>
  </block>

<view class=‘letters‘>
  <text wx:for="{{list}}" bindtap=‘chooseLetter‘ data-letter="{{index}}">{{index}}</text>
</view>

 

WCSS代码:

.letter{ background: #ccc; font-size: 14px; padding-left: 10px;}
.item{ line-height: 40px; padding: 0 10px; border-bottom: 1px solid #eee;}
page{ width: 100%; height: 100%;}
scroll-view{ width: 100%; height: 100%;}
.letters{ position: fixed; top: 0px; right: 0; width: 30px; height: 100%; background: #eee;
  display: flex; flex-flow: column;}
.letters text{ display: block; font-size: 14px; color: #666; text-align: center; flex:1;}

 

js代码

onLoad: function (options) {
    var that = this;
    wx.request({
      url: ‘http://api.besttool.cn/?c=Car&a=brandlist‘,
      method:‘post‘,
      header:{
        ‘content-type‘: ‘application/x-www-form-urlencoded‘
      },
      data:{
        appid:1,
        secret:‘d90824a5a8224fd7bb4fdffd331c62aa‘
      },
      success(res){
        console.log(res);
        that.setData({ list: res.data.brandlist});
      }
    })
  },

  chooseLetter(e){
    this.setData({
      curLetter: null
    });
    var letter = e.currentTarget.dataset.letter;
    console.log(letter);

    // 查找对应的id
    var id = "#letter" + letter;
    const query = wx.createSelectorQuery()
    query.select(id).boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      wx.pageScrollTo({
        scrollTop: res[0].top + res[1].scrollTop,
        duration: 300
      })
    })
  },

点击右侧的字母会自动滚动到对应的位置。

微信小程序通讯录首字母索引效果,车辆品牌选择列表

标签:play   通讯录   mamicode   app   lex   secret   osi   程序   XML   

原文地址:https://www.cnblogs.com/dragondean/p/10459337.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!