這篇文章給大家介紹怎么在小程序中自定義組件實現(xiàn)城市選擇功能，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都創(chuàng)新互聯(lián)公司成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元單縣做網(wǎng)站,已為上家服務,為單縣各地企業(yè)和個人服務,聯(lián)系電話:13518219792

首先還是設置布局，從實現(xiàn)效果看，組件可分成三個部分：展示城市數(shù)據(jù)的二級列表、側(cè)邊的滑動欄以及中間的提示框。也就是一個scroll-view，一個view布局以及一個text。最終確定的wxml布局文件如下：

<scroll-view class='cityList' scroll-y scroll-into-view='{{currentIndex}}' scroll-top='{{scrollTop}}'>
   <view wx:for='{{allCities}}'>
     <view class='letter-class' id="id{{index}}">{{item.letter}}</view>
     <view class='item-class' wx:for='{{item.cityList}}' wx:for-item='cityItem' bindtap='citySelectEvent' data-city='{{cityItem.name}}' data-letter='{{cityItem.key}}'>{{cityItem.name}}</view>
   </view>
</scroll-view>
 
<view class='citySlide' catchtouchstart='slideStart' catchtouchmove='slideMove' catchtouchend='slideEnd'>
   <view class='citySlideItem' wx:for='{{allCities}}' data-index='{{index}}'>{{item.letter}}</view>
</view>
 
<text class='letterText' hidden='{{isLetterHidden}}' style='top:{{letterTop}}px;left:{{letterLeft}}px'>{{letterText}}</text>

布局文件有了，我們就需要考慮該如何實現(xiàn)側(cè)邊欄與二級列表的聯(lián)動效果了。這里我利用的是scroll-view的scroll-into-view屬性，這個屬性能讓scroll-view滑動到對應id的view的位置，很符合我們的需求。

scroll-into-view屬性.png

這里我們?yōu)榱斜淼牡谝患壊季講iew設置id，并為scroll-view設置scroll-into-view屬性

<scroll-view class='cityList' scroll-y scroll-into-view='{{currentIndex}}' scroll-top='{{scrollTop}}'>
  .
  .
  .
//id不能以數(shù)字開頭
<view class='letter-class' id="id{{index}}">{{item.letter}}</view>

然后在.js中的data中初始化currentIndex為'id0'

/**
   * 組件的初始數(shù)據(jù)
   */
   data: {
     currentIndex: 'id0'
   }

現(xiàn)在的問題就是如何計算出手指在側(cè)邊欄上觸摸的是第幾個letter，然后通過改變currentIndex的值，使scroll-view滑動到指定位置來達到聯(lián)動的效果。

下面說下思路

首先確認側(cè)邊欄的高度，我是以屏幕高度減去80px作為側(cè)邊欄高度，在.wxss文件中通過樣式設置。

.citySlide {
   display: flex;
   flex-direction: column;
   width: 60rpx;
   height: calc(100% - 80px);
   position: absolute;
   top: 40px;
   right: 16rpx;
   align-items: center;
   justify-content: center;
   background-color: #ccc;
   opacity: 0.6;
}

然后在.js中通過把屏幕高度減去80px計算出側(cè)邊欄的具體高度。再除以數(shù)據(jù)源的一級數(shù)據(jù)數(shù)組長度，計算出每個letter的高度。

 wx.getSystemInfo({
        success: function (res) {
          letterLineHeight = (res.windowHeight - 80) / that.data.allCities.length;
          that.setData({
             letterTop: res.windowHeight / 2 - 30,
             letterLeft: res.windowWidth / 2 - 30
          });
        }
     })

計算出每個letter的高度后，我們就可以在側(cè)邊欄的觸摸監(jiān)聽事件中，通過觸摸的點的坐標位置，來計算出當前觸摸的letter的序號index，然后再動態(tài)修改currentIndex的值為('id'+index)。就可以達到聯(lián)動的效果了。

顯示在屏幕中央的提示框的實現(xiàn)則比較簡單，通過一個變量isLetterHidden控制text的顯示與隱藏就可以輕松實現(xiàn)。

slideStart: function (e) {
  //手指觸摸的y坐標值
  var touchY = e.touches[0].clientY;
  //布局距離屏幕頂端距離
  var offsetTop = e.currentTarget.offsetTop;
  var index = parseInt((touchY - offsetTop) / letterLineHeight);
  this.setData({
    currentIndex: 'id' + index,
    isLetterHidden: false,
    letterText: this.data.allCities[index].letter
  });
},
 
slideMove: function (e) {
  var touchY = e.touches[0].clientY;
  var offsetTop = e.currentTarget.offsetTop;
  var index = parseInt((touchY - offsetTop) / letterLineHeight);
  this.setData({
    currentIndex: 'id' + index,
    isLetterHidden: false,
    letterText: this.data.allCities[index].letter
  });
},
 
slideEnd: function (e) {
  var that = this;
  wx: setTimeout(function () {
    that.setData({
       isLetterHidden: true
    });
  }, 200);
}

這里有一點要注意，設置側(cè)邊欄觸摸事件的時候，要選擇catchtouchxxxx事件，不能使用bindtouchxxxx，因為bind事件不會阻止事件冒泡，這樣手指在側(cè)邊欄滑動時，會影響到下方的列表的滑動，而catch事件阻止了事件冒泡，就不會出現(xiàn)滑動影響的問題。

再說下城市的數(shù)據(jù)源格式要求，要求是一個二維數(shù)組，然后子項要有name和key兩個字段，分別代表城市名和類別letter。

關于怎么在小程序中自定義組件實現(xiàn)城市選擇功能就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

新聞標題：怎么在小程序中自定義組件實現(xiàn)城市選擇功能
標題路徑：http://m.newbst.com/article8/jheeop.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、品牌網(wǎng)站設計、、虛擬主機、App設計、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)