當(dāng)我們的業(yè)務(wù)需求不僅限制于國內(nèi)的話厕鹃，那么我們在登錄的時候這個手機(jī)號就會有所變動兢仰，因為每個國家的電話區(qū)號不一樣，所以呢熊响，以下就是今天我給大家分享的內(nèi)容旨别，大家先看一下下面gif圖，大概是這個樣子的??
電話區(qū)號.gif
這里我們用到的組件是scroll-view汗茄，大家下來可以看看文檔哦秸弛，挺好上手的
wxml
<scroll-view scroll-y="true" style="height: 100vh;" scroll-into-view="{{intoPosition}}" scroll-with-animation="true" bindscroll="handleScroll">
<view wx:for="{{countryCodeList}}" wx:key="index" id="{{item.key}}" class="every_content">
<view class="title" id="title" data-key="{{item.key}}">{{item.key === 'hot' ? '熱門國家或地區(qū)' : item.key}}</view>
<view class="out_content">
<view class="ind_content" wx:for="{{item.data}}" wx:for-item="item1" wx:for-index="index1" wx:key="index1" data-code="{{item1.phoneCode}}" bindtap="backInputPhone">
<view class="left_tit">{{item1.countryName}}</view>
<view class="right_tit">+{{item1.phoneCode}}</view>
</view>
</view>
</view>
</scroll-view>
注意：
- 這里尤其注意的是 必須得給容器設(shè)置固定的高度，這里我們需要的是需要滿屏洪碳，所以就說100vh了递览。
- scroll-y 必須得設(shè)置為true，不然就會出現(xiàn)滑不動的情況瞳腌。
1.初始化數(shù)據(jù)
onReady() {
let totalTop = 0;
const query = wx.createSelectorQuery()
query.select('.title').boundingClientRect()
query.select('.ind_content').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec((res) => {
let titleHeight = res[0].height;
let contentHeight = res[1].height;
this.data.countryCodeList.map(item => {
let height = (item.data.length * contentHeight) + titleHeight; // 主要
item.distance = totalTop;
totalTop += height;
return {...item}
})
this.setData({
countryCodeList: this.data.countryCodeList
})
})
}
這里我們需要在初始化的時候把每一塊的scrollTop（例子：左邊字母A的scrollTop)放到數(shù)據(jù)里面绞铃，為了適配不同的機(jī)型，需要獲取不同的高度,然后根據(jù)他們的高度計算出每一塊所對應(yīng)的scrollTop嫂侍，這里主要是為了當(dāng)滾動的時候儿捧，把當(dāng)前區(qū)域所對應(yīng)的字母放到最頂部，同時右邊的小字母的顏色對應(yīng)變化挑宠。
2點(diǎn)擊右邊字母跳到不同的位置
let tip = e.currentTarget.dataset.info;
let one = tip.split("-")[0];
let two = tip.split("-")[1];
this.setData({
intoPosition: one,
clickIndex: two,
topVal: one
}
)
這里我們根據(jù)scroll-into-view來做菲盾，具體可以參照scroll-view。
3.滑動時各淀，當(dāng)前區(qū)域所對應(yīng)的字母放到最頂部懒鉴，同時右邊的小字母的顏色對應(yīng)變化。
handleScroll: throttle(function(e) { // 節(jié)流
for(let i = 0; i < this.data.countryCodeList.length; i++){
if(i > 0 && e.detail.scrollTop < this.data.countryCodeList[i].distance){ // 主要
this.setData({
topVal: this.data.countryCodeList[i - 1].key, // 頂部標(biāo)題欄的字母
clickIndex: i - 1, // 右邊小字母的顏色的下標(biāo)
})
return;
}
}
}),
4.選中之后返回，并替換一級頁面的數(shù)據(jù)
backInputPhone(e) {
let code = e.currentTarget.dataset.code;
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2]; //上一個頁面
wx.navigateBack({
delta: 1
})
prevPage.setData({
phoneCode: code
})
}
5.代碼中用到的節(jié)流方法
const throttle = (fn, wait = 0) => {
let lastTime = null
return function () {
let curTime = new Date()
// 距離下次觸發(fā)fn還需等待的時間(如果沒有l(wèi)astTime說明是第一次临谱，可以表示執(zhí)行璃俗，即等待時間為0
let remainTime = lastTime ? wait - (curTime - lastTime) : 0
if (remainTime <= 0 || remainTime > wait) {
lastTime = curTime
return fn.apply(this, arguments)
}
}
}
以上就是在下分享的內(nèi)容，有興趣的可以看看小編上面發(fā)的源碼悉默，如果還有迷惑之處或者認(rèn)為寫的不好的地方城豁，歡迎在下方評論區(qū)留言，我們共同進(jìn)步哦??
源碼地址：https://github.com/Winner-Wei/country-phone-code
