v2.0.2

v2.0.2 2.0版本上线
2026-06-08 15:23:17 +08:00 · 2018-12-23 03:03:40 +08:00
parent df555a143e
commit 967f46ae3d
257 changed files with 11663 additions and 4566 deletions
@@ -0,0 +1,8 @@
+const app = getApp();
+Page({
+  data: {
+    StatusBar: app.globalData.StatusBar,
+    CustomBar: app.globalData.CustomBar,
+  },
+ 
+});
@@ -0,0 +1 @@
+{}
@@ -0,0 +1,17 @@
+<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/wdh2236.jpg);">
+    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
+      <icon class='icon-back' /> 微动画
+    </navigator>
+  </bar>
+</custom>
+<card class="DhCard">
+  <item class="gradual-green shadow-blur">
+    <view>
+      水波纹
+    </view>
+    <view class='animation-wave'>
+      <view class='wave'></view>
+    </view>
+  </item>
+</card>
@@ -0,0 +1,75 @@
+card.DhCard item{
+  position: relative;
+  padding: 20px 15px 40px;
+  text-align: center;
+  font-size: 18px;
+}
+card.DhCard item .animation-wave {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+/* ==================
+         微动画
+ ==================== */
+
+.animation-wave {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  overflow: hidden;
+}
+
+.animation-wave::before, .animation-wave .wave, .animation-wave::after {
+  position: absolute;
+  width: 1080px;
+  height: 50px;
+  left: 0;
+  bottom: -1px;
+  background-repeat: repeat no-repeat;
+  background-position: 0 bottom;
+  transform-origin: center bottom;
+}
+
+.animation-wave::before {
+  content: "";
+  z-index: 1;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAAyCAMAAACOGpvIAAAApVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+4/eNVAAAANnRSTlMA7hEq/PjdIg0C2bsIRD7LBZkxj1ue5eHTfGDEtXdzVfJrTzXrlIRLG66iiWWlf245FrKqHr+BaDdEAAAFjElEQVR42u3d13abQBQF0EE00SWaRFGjqPdy///TgtIjZzkqCGbI3U9+vutwpmAbghBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhFBZAESO4zJJsiLt1F0N1iOTb5PG68zTWbjbOsujZvWlHlcQoCByha/DWHhOsHMN+6CQ5tPlfbIeTvNNfLFUyS9mMIYrruBLfUuLN/l0uE72Z538Bzpz+zYdf47juMy3w3Bmzzuk+dqyOVoPVt2TFlmSlBUzEAEI/M1Y1bzA3bdI47Tt0TA/9jO4n+BbC2eX8E18ZFp7N+hq6hjux/XjfDCyG7m4dPhk5ywsH+6XfQtHEwvk03CQz6cSdSdmQyKip+tc68HzBCl2Qrsp9dEyd90og+f5Wr5OmzKNojLc1VEVng+HelyN+KZsTtvmpHv5PBwE/k3a7FKmG7WTTpaqAKUQ+t6E7WkUsRgueiVNQ12yPg1C+DC3RCjDOHJcmTBN3+82EvwbgfuI2iBlsk+VdKCJUDJRC/ZsPi66MbUEuFPTs1HgJwsOyuUvwzlhUsfcRiLch8D9uMWEsTr9FYvyjeOhzdbjoqRBeR36MRs8Ycw5XPrwHmqeMHZBqNjDeAz3I/AYyTEZeVo6Rt6DN8u8hJUboPZoycF79RyDmW2YYq5UeCvhMmRmmdUTL4PHEHhY1qU/H/psyUElxGNI/9rSCmMRqsB5M+qzQUhn5mVQhX7AwDas7S5EeBiBZ2T5ntBLMT0OKiTGLs1vF/RRLEJ1uK5JaKYYlaajP6D6wkMfLZ4LB4EnSVNKN2L8tAeVGy8NOk9wL5Vo47JBSOr4UDFBcyk9z77SoQSedwmpG0h7YkFNfIe+balclGg9ogl12SDkHKhQh+u6QqjDr14JB3ltIN2UUMRcilAni6qnRXcvUCNxSdeRRXc1AeojBVQdWdrrCF5C4EX9HSV3g4eBCrUTN7QcWeycg7qpgwOhxL5b+ziEOKHk4lgxNiK8iDTjYVFmCxHoIAVnUrfWpA9UEBez2rNByJyGNeUqW1FwnD1vewBAQXHUvw+7joIigjbSSY2MDS0leuU/c1PanCPKreihi0F6p0FK24fV9bDoo5imYHzD5SmphxxIQJsaXyuY9R9Rbo3vfl9N8zQIsP0C3/SoC8Z3aiCTqrXWEVCpntfV9oqqnegv0pQnd6Pz9xQIlKlX7UDkKX2r6++iyYFUR09ONB1Rbvkrm1RJDii55/k7q9JskPPwOg1qi6PQ31bUHXJgAfUEbf2PfDD3O/YvUCtbV3gGwiFcquoOeWhBge7iKKgrUyHvlU6pXk5+J0QDnrxXyz2NgQ0V/JFkx3AoeYlCQzaU/aoPX9FfHAXuFM7Jmxxczwe2SN23/RWtkgYRfZfDn2djfSbvwk+OrHTo+7NB5utTBj8wURxXatctvTxaidNn6zH5QbBWs7IDotjDI/0HlKqyofCTDWsryvuyQeTQU+E37BTHlX/czkpKSMsYnOi+C/0nQd0MzZISck5WF8bW1hu9U2nD6PChE7E9jTKz0TKChQ832CqOH+0x4nXyNJ1PmO+M3xQJmb0yjtY+dDQ2NxofSYvXsqGcjXVu0fw26eFsyMor/8TfncY9+Cv2iuMrQYq7A3f/0IcoDuko8C6Uvot/Ue/iDUb24ZH+lI1wu4wyaJxnstGyk2Eeq42pjN+I/esXFx7MhhluPa0Hn2C0OH7K+trXj/uMjL0ty61Ch1y1i5/OMp8ayfVTOF5s+WxeZjxG9K3Yc7a7cGbYvDwvZtAmV53ip4Ms26bx7Vs4kcr2TryUbNjGzN0Fjne0ek0sDKayQQAhhLA4EEI3sDgQQvXD4kAIYXEghD7A4kAI1Q+LAyGExYEQ+gCLAyFUPywOhBAWB0LoAywOhFD9vgClDyW0lvRZlgAAAABJRU5ErkJggg==);
+  opacity: 1;
+  animation: animation-wave 6s linear infinite;
+  background-size: 540px 15px;
+}
+
+.animation-wave .wave {
+  z-index: 2;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAAyCAMAAACOGpvIAAAAolBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8ELnaCAAAANXRSTlMA/vsQ8uXuoSHSyQrY+LoGFah89N7hk+tFP5qIV7OBdW9KMRtgT8RqAs1dOSm/rQOOKwFkJFel6O8AAAVfSURBVHja7d3ZkppAGIbhptlkVwQBAVFU3B2X+e//1oIxqSxTWSYDdDf5n6M5fks/abBGghBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBAT3rJcrOazi567phGEWo3Cg1Sj1BlrUWBUuT5bHWTSe97rupiMXNNWI2VMqVSDH2uowe50ns72pUX6z3pdz7/mcJy3OZRItU13NCkWA4/0n3xYpXpeGUGkjZ81njm0mhoYOzfXJ7P5alEue1zDKrNikhsRvIPkREZ+2S9J71iJPzJDhb6rxlita2RD0j9yUuh1DgnegSpBpc/LPr5lhtklNyLnPTmi3fkyXx97VcM63CduCB9ANUO/9+QNY8WXSnU+WmPVl6sxOU5P4YdyjAPXL19IP8h73dAo/DNq52l2FL+GV250m0IznGC0Evp63UsuOwWaq7EXugaxkrSxHFJ08l+J0KxsZDvQiLF5yQZEVC+Hwh1D0zT3LuTl2MthGkgt1FgJWYNYcQs5nN1M0FOtt88jaJiqrwSscdycNWiJpJ7XWyKSa2pQeMIa9Yamdms5lNNGsFPcdjFSJWiHPVkLVMOLJyG0jBq+IEW8tTuGllFjJkgNYmWuAy0Lp8KcWizfoNAqeiqEqOEtdA06IYUp9/dLvayi0AkpvHBfg8h3U4JOaPqVcG+Yht3kMPwj4do20TXoUjjj+P7gNj5R+I3/qwaxMlOCDkVTro/41iyEDhkFvzWOdYrOScaKz4dPR12BP/l/amyT3IHOBQWnS7rdGBJ0jLpcPoWTNyYw4rgHwhl5pgIjzom7GuR1ogEb1FzfCG/iigITih7zVeOW6GNgKUo5ujl4iysJWIouHNUg1soGlhS+jizDqQYMBT5HNQobmJNMTh5KDicaMCftMj5qkPLsAHM2L9922c5tCRij+ZqTGgT4MNaZf1vuJTOYvzD4qUFkXwU+OGcOnrIcXApciFIOnrIsfV6GoxZsWI7pQB8DT4I5yxq3RcXLiH4Wsr1TKvNwJfpNtWJaw9q7EnA0HADUTQgT1pyDAxs3NchgqgBv6InVvcHthv0R5WfKNGFU45ZMNQDgazhqWvdfHLwtKk6uQt9Q9FfSNXkWAp8UFl8MW5ucvjiC2ZF07pqGAMDjcNTC2ZB05zri64jyMzXtsoZ35+Y+Dwc1yMHl4O7wr5mbTmssCwMA+B0OACnwuyly1Lk6u/5C0NGSepsdp5+uLGqQ2OX7I+WBnrrajkFhSgCcD8eDOjmSVt3iswir8aROj6Rdw5S/k/yva1xJu7y5yfW1xnekqjiSdm0PqQE1IYajppxWMmnH0Bfhw/UH49O9rRovWS7OhrZegyQjVZgNfQqm69ZqLO+jCABEGo6aFOX7ppMMi4q/hwZ/W6PxKfWys2hvkxZrbGM9EO0T5Yma6aLx8RjspzbUxBuOzxSjqUGVM93m/+D6e8pu0tAr5CWemJqYo9FGjUNaRWLXkOzRPGloPeTYP6tQE3g4Phsb+qb0PvBPl4uz8JvxjfKxGi/lRjcUsd8lP9U4bv+9xnEz3Ym+oN+vR7EYbD/0kwZpHsJDH4bjyVHNkb9Ykr92G6xn550qyp2ulmuQ5cIfmWp/BvQ7khJUehG/p8bwUSMc92UyvucYj19cKIfvGYxBsvenpxA+69lwfEWV54/7+PMsTq6DwUAmD8P6rzJZ7Oez5y8DKWKeV5uu4WON/7UGVXe5fvHn+3VcXgdLWZYt8uDVfw0Hr+Uhzu5FOh1VtgJf9Ho4EELNwuFACP0IhwMhxB4OB0IIhwMh9AYOB0KIPRwOhBAOB0LoDRwOhBB7OBwIIRwOhNAbOBwIIfY+AR+UyCBbi1dfAAAAAElFTkSuQmCC);
+  opacity: 0.618;
+  animation: animation-wave 18s linear infinite;
+  background-size: 1080px 20px;
+}
+
+.animation-wave::after {
+  content: "";
+  z-index: 3;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAAyCAMAAACOGpvIAAAApVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+4/eNVAAAANnRSTlMA/vvu5fKS0iDJ+Ll8Kt7YFQYRCkn0DqiC4aBvs0+jmnVhXT/NimpEGunEAwK/rTQBWTBWJDuXdmK3AAAFOklEQVR42u3d2ZKiMBSA4RA2WZVNAQFxART3Le//aOOMU9U942x2C0mY81319V/kmASqGgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAK2e596fjUIkTQ1PtSLzB5CvhBmM9EFe2WidxOL0OUec5lzRXRobWl0Q5wFi4IT/WkOzFdjcxZycPdZ93Scf3HCtZ1x9zyCuprxkjJfd7Duq+4XUaxkmt2isxuNe45xBvJFtdGEmmhOOpf1p2uIZ3OudKoq7IEwR9pSbKbIk6x5ubIy2S8VM1AklNivMAdY87z7NbDoE8Act2HY/3XVwyg+PXlaI/k2O12Cnj1OpUDW8/VYyIfAIW1WzakQXjVUUt6Z+sEc9c1A1uVWyjT+UIbMM8rVE3uLNYFTH5MNxPirPFfw1nX2Z9TF5Dt0dTrvfrzlVZyOR1NWZc10DevHhZDmG1NS+Ia94x6+vkJQJNOfYQr9b73AjIq4nGlMvt2Po6sQWo8bbvaiCHvgg5XS7OLBHJi0kZj2d8q9yJpCGCtEs3iCdWoWJyBzXQel/0G8shb0vOTnEbfyQJpBl9JeWohlMpEWkYVk1O3rk46cO+q4kavDwfw7Ohk4ZFE25OLUNTxaRReJtzUcPxY5G0QogK5u9LnWONya/8lzWQO9UE0goxsxDzBkXUTg7VZLzGZh6LpE1RyPD94KbaYvIH/1cN5B01gbRInDB9xPfCiLRIzdmtYd1StE5QZ2y+fLJimbROUKds1tjME520zs4ZnaSbUhVIy7DB5Fu4YakRSnRjjxgzDCVCib69ItZcFJHQgbX0gFhT1ZhQIWcVWzUO8ywgNK0Khq5KD1UtEJpEhaWrUm/aJzTJbB1ZBhORUGSb7NQY5H1CnaAx8lJyoIiEOmFxZqMG2u90Ql2fla9dNuO+QCjDScpCjbW/w4QNQUz985/1WaX+YHwXZNRrINeUCBv0HQPvFfYGI0tlVdCu0QsjwhK7dBA9vSwgLLHHNGsc/JqVIfpNRPem1GVhJ/qmntKr4R0Npp6Mb7BxRVR4YwYObI815oiO3kQmrMFb/4Co2JT0jyiPdz9zGjUO8wlTE/Qdsf0PBw9+zcgu9IEcX1DbXMY2om9kGh+GpRqjD4cdtl3jEtqEZVE4QO2xRmwdUX4mtVrDKZm55/klqd1PbK8GA7fDv6eV7dW4mAvCPME22yliZazuvN6zW5odTrlg9NeVRg1UGWz/pNwPcG3MjsM+VAkvJMVCjTpUOx6mxp00sVCzBiF7J3l6NZyxxvRe4x2hzhutMTjGrLxe+1fydjpEzViaPPy4/iBorsb6nPAzQxuvgeaZxM0MvbMnaSM13FRh++j6W8Iqmb06ySCv2XtpQK2Gc97xtkwarLGpMpu3X5Q7rBX+K2u4VT5i+y7072R1cn5NE/cY99k/uP6ZvFBe9ISsK0UT+RwaTdS4FjXnNYR+Np5/uoZnpfzPjDeBGpcn5+M1rvmO+5nxRlazz9RYn8pYlfleJT/UiEtr8/EaVjlZcD4z3k+PUe73PlDjMNifzck26kqIH+iSNjL95RM1emm4W6x4uelquAZa+uZIk7ozQN8RZLuO8+rpGlHQxZWiq7tinJ4G6HeGrusue9a+SmdjU4mThcTnEe1JWL7/cx9zfPTnVq/Xc9FXg9tfp7l/S3H/z0DyfxEDakCN38HSIolvKWZptbd6S9d1h+iGAADAk2BwAABgcAAAHsDgAADQB4MDAACDAwDwAAYHAIA+GBwAABgcAIAHMDgAAPTB4AAAwOAAADTvCzoONH1sYtNIAAAAAElFTkSuQmCC);
+  opacity: 0.4;
+  animation: animation-wave 24s linear infinite;
+  background-size: 540px 25px;
+}
+
+@keyframes animation-wave {
+  0% {
+    transform: translateX(0) translateZ(0) scaleY(1);
+  }
+
+  50% {
+    transform: translateX(-25%) translateZ(0) scaleY(1);
+  }
+
+  100% {
+    transform: translateX(-50%) translateZ(0) scaleY(1);
+  }
+}
@@ -0,0 +1,7 @@
+const app = getApp();
+Page({
+  data: {
+    StatusBar: app.globalData.StatusBar,
+    CustomBar: app.globalData.CustomBar,
+  },
+});
@@ -0,0 +1 @@
+{}
@@ -0,0 +1,7 @@
+<custom style="height:{{CustomBar}}px;">
+  <bar class="fixed gradual-orange" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
+      <icon class='icon-back' /> 渐变
+    </navigator>
+  </bar>
+</custom>
@@ -0,0 +1 @@
+/* miniprogram/pages/plugin/gradual/gradual.wxss */
@@ -0,0 +1,24 @@
+const app = getApp();
+Page({
+  data: {
+    StatusBar: app.globalData.StatusBar,
+    CustomBar: app.globalData.CustomBar,
+    list: [{
+        title: '索引列表',
+        img: 'https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg',
+        url: '../indexes/indexes'
+      },
+      {
+        title: '微动画',
+        img: 'https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg',
+        url: '../animation/animation'
+      }
+    ]
+  },
+  toChild(e) {
+    wx.navigateTo({
+      url: e.currentTarget.dataset.url
+    })
+  },
+
+});
@@ -0,0 +1 @@
+{}
@@ -0,0 +1,14 @@
+<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/cjkz2329.jpg);">
+    <view class='content' open-type="navigateBack" delta="1" hover-class="none">
+      <image src="/images/cjkz.png" mode='widthFix'></image>
+    </view>
+  </bar>
+</custom>
+<card>
+  <item class="bg-img shadow-blur" style="background-image:url({{item.img}})" bindtap="toChild" data-url="{{item.url}}" wx:for="{{list}}" wx:key>
+    <view class="cardTitle">
+      {{item.title}}
+    </view>
+  </item>
+</card>
@@ -0,0 +1,41 @@
+
+bar .content image{
+  height: 30px;
+  width: 120px;
+}
+
+.cardTitle{
+  color: #fff;
+  padding: 45px 30px;
+  font-size: 20px;
+  font-weight: 300;
+  transform: skew(-10deg, 0deg);
+  position: relative;
+  text-shadow: 0px 0px 3px rgba(0,0,0,0.3)
+}
+
+.cardTitle::before{
+  content: "";
+  position: absolute;
+  width: 30px;
+  height: 3px;
+  border-radius: 10px;
+  background-color: #fff;
+  display: block;
+  top: 30px;
+  left: 25px;  
+  transform: skew(10deg, 0deg);
+}
+.cardTitle::after{
+  content: "";
+  position: absolute;
+  width: 70px;
+  border-radius: 3px;
+  height: 12px;
+  background-color: #fff;
+  display: block;
+  bottom: 38px;
+  left: 45px;  
+  transform: skew(10deg, 0deg);
+  opacity: 0.1;
+}
@@ -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
+      }
+    }
+  }
+});
@@ -0,0 +1 @@
+{}
@@ -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>
@@ -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;
+}
				`@@ -0,0 +1 @@`
				`/* miniprogram/pages/plugin/gradual/gradual.wxss */`