v2.0.2

v2.0.2 2.0版本上线

demo/pages/plugin/indexes/indexes.js

@@ -0,0 +1,88 @@
+const app = getApp();
+Page({
+  data: {
+    StatusBar: app.globalData.StatusBar,
+    CustomBar: app.globalData.CustomBar,
+    hidden: true
+  },
+  onLoad() {
+    let list = [];
+    for (let i = 0; i < 26; i++) {
+      list[i] = String.fromCharCode(65 + i)
+    }
+    this.setData({
+      list: list,
+      listCur: list[0]
+    })
+  },
+  onReady() {
+    let that = this;
+    wx.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
+      that.setData({
+        boxTop: res.top
+      })
+    }).exec();
+    wx.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
+      that.setData({
+        barTop: res.top
+      })
+    }).exec()
+  },
+  //获取文字信息
+  getCur(e) {
+    this.setData({
+      hidden: false,
+      listCur: this.data.list[e.target.id],
+    })
+  },
+
+  setCur(e) {
+    this.setData({
+      hidden: true,
+      listCur: this.data.listCur
+    })
+  },
+  //滑动选择Item
+  tMove(e) {
+    let y = e.touches[0].clientY,
+      offsettop = this.data.boxTop,
+      that = this;
+    //判断选择区域,只有在选择区才会生效
+    if (y > offsettop) {
+      let num = parseInt((y - offsettop) / 20);
+      this.setData({
+        listCur: that.data.list[num]
+      })
+    };
+  },
+
+  //触发全部开始选择
+  tStart() {
+    this.setData({
+      hidden: false
+    })
+  },
+
+  //触发结束选择
+  tEnd() {
+    this.setData({
+      hidden: true,
+      listCurID: this.data.listCur
+    })
+  },
+  indexSelect(e) {
+    let that = this;
+    let barHeight = this.data.barHeight;
+    let list = this.data.list;
+    let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
+    for (let i = 0; i < list.length; i++) {
+      if (scrollY < i + 1) {
+        that.setData({
+          listCur: list[i],
+          movableY: i * 20
+        })
+        return false
+      }
+    }
+  }
+});

demo/pages/plugin/indexes/indexes.json

@@ -0,0 +1 @@
+{}

demo/pages/plugin/indexes/indexes.wxml

@@ -0,0 +1,41 @@
+<custom style="height:{{CustomBar}}px;">
+  <bar class="fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg);">
+    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
+      <icon class='icon-back' /> 索引
+    </navigator>
+  </bar>
+</custom>
+<bar class="search fixed" style="top:{{CustomBar}}px;">
+  <view class='serach-form round'>
+    <icon class="icon-search" />
+    <input type="text" placeholder="输入搜索的关键词" confirm-type="search" />
+  </view>
+  <view class='action'>
+    <button class='gradual-green shadow-blur round'>搜索</button>
+  </view>
+</bar>
+<scroll-view scroll-y class="indexes" scroll-into-view="indexes-{{listCurID}}" style='height:calc(100vh - {{CustomBar}}px - 50px)' scroll-with-animation="true" enable-back-to-top="true">
+  <block wx:for="{{list}}" wx:key>
+    <view class='padding indexItem-{{list[index]}}' id="indexes-{{list[index]}}" data-index="{{list[index]}}">{{list[index]}}</view>
+    <list class="menu menu-avatar no-padding">
+      <item wx:for="{{2}}" wx:key wx:for-index="sub">
+        <avatar class="round lg">{{list[index]}}</avatar>
+        <view class='content'>
+          <view class='text-grey'>{{list[index]}}<text class='text-abc'>{{list[sub]}}</text>君</view>
+          <view class='text-gray text-sm'>
+            有{{sub+2}}个主子需要伺候
+          </view>
+        </view>
+      </item>
+    </list>
+  </block>
+</scroll-view>
+<view class='indexBar' style='height:calc(100vh - {{CustomBar}}px - 50px)'>
+  <view class='indexBar-box' bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove">
+    <view class="indexBar-item " wx:for="{{list}}" wx:key id='{{index}}' bindtouchstart="getCur" bindtouchend="setCur" >{{list[index]}}</view>
+  </view>
+</view>
+<!--选择显示-->
+<view hidden="{{hidden}}" class="indexToast">
+  {{listCur}}
+</view>

demo/pages/plugin/indexes/indexes.wxss

@@ -0,0 +1,69 @@
+page {
+  padding-top: 50px;
+}
+
+.indexes {
+  position: relative;
+}
+
+.indexBar {
+  position: fixed;
+  right: 0px;
+  bottom: 0px;
+  padding: 10px 10px 10px 30px;
+  display: flex;
+  align-items: center;
+}
+
+.indexBar .indexBar-box {
+  width: 20px;
+  height: auto;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+}
+
+.indexBar-item {
+  flex: 1;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #888;
+}
+
+movable-view.indexBar-item {
+  width: 20px;
+  height: 20px;
+  z-index: 9;
+}
+
+movable-view.indexBar-item::before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 5px;
+  height: 10px;
+  width: 2px;
+  background-color: #f37b1d;
+}
+.indexToast{
+  position: fixed;
+  top: 0;
+  right: 40px;
+  bottom: 0;
+  background: rgba(0,0,0,0.5);
+  width: 50px;
+  height: 50px;
+  border-radius: 5px;
+  margin: auto;
+  color: #fff;
+  line-height: 50px;
+  text-align: center;
+  font-size: 24px;
+}