用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序实现A-Z导航的Slidebar

Rolan 2019-11-12 00:41

微信小程序实现A-Z导航的Slidebar效果代码slidebar.wxmlview id="s-bar" class="slidebar" bindtouchstart="_onTouchStart" bindtouchmove="_onTouchMove" bindtouchend="_onTouchEnd" view wx:for="{{data}}" class ...

微信小程序实现A-Z导航的Slidebar

效果

代码

slidebar.wxml

  1. <view id="s-bar" class="slidebar" bindtouchstart="_onTouchStart" bindtouchmove="_onTouchMove" bindtouchend="_onTouchEnd">
  2. <view wx:for="{{data}}" class="slide-item" id="item-{{index}}" wx:key="{{index}}">
  3. <text class="t {{item.selected ? 'slide-item-selected' : ''}}">{{item.key}}</text>
  4. </view>
  5. </view>
  6. <view class="dialog" hidden="{{currentKey == '' || closeKeyDialog}}" animation="{{animationData}}" bindtransitionend="_onAnimationend">
  7. {{currentKey}}
  8. </view>

slidebar.wxss

  1. /* components/slidebar/slidebar.wxss */
  2. .slidebar{
  3. position: absolute;
  4. right: 0rpx;
  5. height: 98vh;
  6. width: 60rpx;
  7. border-radius: 30rpx;
  8. }
  9. .slide-item{
  10. display: flex;
  11. justify-content: center;
  12. justify-items: center;
  13. height: 3.9vh;
  14. width: 60rpx;
  15. font-size: 24rpx;
  16. color: #222222;
  17. text-align: center;
  18. line-height: 3.9vh;
  19. font-weight: 400;
  20. }
  21. .slide-item .t{
  22. width: 40rpx;
  23. height: 40rpx;
  24. display: inline-block;
  25. }
  26. .slide-item-selected{
  27. font-weight: 500;
  28. color: #ffffff;
  29. background: #07C160;
  30. border-radius: 50%;
  31. }
  32. .dialog{
  33. position: absolute;
  34. top: 50%;
  35. margin-top: -180rpx;
  36. left: 50%;
  37. margin-left: -125rpx;
  38. width: 250rpx;
  39. height: 250rpx;
  40. text-align: center;
  41. font-size: 72rpx;
  42. line-height: 250rpx;
  43. color: #ffffff;
  44. background: grey;
  45. border-radius: 15%;
  46. }
  47. slidebar.js
  48. // components/slidebar/slidebar.js
  49. Component({
  50. /**
  51. * 组件的属性列表
  52. */
  53. properties: {
  54. data: {
  55. type: Array,
  56. value: [
  57. { key: "A" },
  58. { key: "B" },
  59. { key: "C" },
  60. { key: "D" },
  61. { key: "E" },
  62. { key: "F" },
  63. { key: "G" },
  64. { key: "H" },
  65. { key: "I" },
  66. { key: "J" },
  67. { key: "L" },
  68. { key: "M" },
  69. { key: "N" },
  70. { key: "O" },
  71. { key: "P" },
  72. { key: "Q" },
  73. { key: "R" },
  74. { key: "S" },
  75. { key: "T" },
  76. { key: "U" },
  77. { key: "V" },
  78. { key: "W" },
  79. { key: "X" },
  80. { key: "Y" },
  81. { key: "Z" }
  82. ]
  83. }
  84. },
  85. /**
  86. * 组件的初始数据
  87. */
  88. data: {
  89. selectedIndex: -1,
  90. currentKey: "",
  91. closeKeyDialog: false,
  92. animationData: {},
  93. },
  94. lifetimes: {
  95. attached: function () {
  96. // 在组件实例进入页面节点树时执行
  97. this.isTouch = false;
  98. },
  99. ready: function(){
  100. this.data.data.forEach((d,i)=>{
  101. this._wxQueryElementInfo("#item-" + i).then(res => {
  102. d.top = res[0].top;
  103. d.left = res[0].left;
  104. d.height = res[0].height;
  105. d.width = res[0].width;
  106. });
  107. });
  108. this.animation = wx.createAnimation({
  109. duration: 1000,
  110. timingFunction: 'ease',
  111. });
  112. },
  113. detached: function () {
  114. // 在组件实例被从页面节点树移除时执行
  115. },
  116. },
  117. /**
  118. * 组件的方法列表
  119. */
  120. methods: {
  121. _onTouchStart: function(e){
  122. this.isTouch = true;
  123. this.setData({
  124. closeKeyDialog: false,
  125. animationData: this.animation.opacity(1).step().export()
  126. });
  127. this._markSlideItemSeleted(e.touches[0].clientY);
  128. },
  129. _onTouchMove: function(e){
  130. this._markSlideItemSeleted(e.touches[0].clientY);
  131. },
  132. _onTouchEnd: function(e){
  133. this.isTouch = false;
  134. this.setData({
  135. animationData: this.animation.opacity(0).step().export()
  136. })
  137. },
  138. /**
  139. * 通过selector查询元素信息
  140. */
  141. _wxQueryElementInfo: function(selector){
  142. return new Promise((resolve, reject)=>{
  143. var query = wx.createSelectorQuery().in(this);
  144. query.select(selector).boundingClientRect();
  145. query.selectViewport().scrollOffset();
  146. query.exec(function (res) {
  147. resolve(res);
  148. });
  149. });
  150. },
  151. /**
  152. * 根据y的位置标记SlideItem的selected状态
  153. */
  154. _markSlideItemSeleted: function(y){
  155. for(var i=0; i<this.data.data.length; i++){
  156. var d = this.data.data[i];
  157. if (y >= d.top && y <= d.top + d.height) {
  158. if(this.data.selectedIndex == i){
  159. return;
  160. }
  161. this._setSlideItemSelectStatus(d,i);
  162. console.log("当前选中=>" + d.key);
  163. this.triggerEvent("selected",d);
  164. return;
  165. }
  166. }
  167. },
  168. _setSlideItemSelectStatus(d,i){
  169. d.selected = true;
  170. if (this.data.selectedIndex != -1) {
  171. this.data.data[this.data.selectedIndex].selected = false;
  172. }
  173. this.setData({
  174. data: this.data.data,
  175. currentKey: d.key,
  176. selectedIndex: i
  177. });
  178. },
  179. _onAnimationend: function(e){
  180. if (this.isTouch){
  181. return;
  182. }
  183. console.log("动画结束")
  184. this.setData({
  185. closeKeyDialog: true
  186. });
  187. },
  188. /**
  189. * 通过key更新slidebar选择的item
  190. */
  191. updateItemSelectedByKey: function(key){
  192. this.data.data.forEach((d,i)=>{
  193. if(d.key == key){
  194. this._setSlideItemSelectStatus(d,i);
  195. return;
  196. }
  197. });
  198. },
  199. /**
  200. * 通过index更新slidebar选择的item
  201. */
  202. updateItemSelectedByIndex: function(index){
  203. if(index > 0 && index < this.data.data.length){
  204. this._setSlideItemSelectStatus(this.data.data[index], index);
  205. }
  206. }
  207. }
  208. })


鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: DrJasonZhang 来自: 简书