当我们的业务需求不仅限制于国内的话，那么我们在登录的时候这个手机号就会有所变动，因为每个国家的电话区号不一样，所以呢，以下就是今天我给大家分享的内容，大家先看一下下面gif图，大概是这个样子的👇
电话区号.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' ? '热门国家或地区' : 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>
注意：
- 这里尤其注意的是 必须得给容器设置固定的高度，这里我们需要的是需要满屏，所以就说100vh了。
- scroll-y 必须得设置为true，不然就会出现滑不动的情况。
1.初始化数据
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)放到数据里面，为了适配不同的机型，需要获取不同的高度,然后根据他们的高度计算出每一块所对应的scrollTop，这里主要是为了当滚动的时候，把当前区域所对应的字母放到最顶部，同时右边的小字母的颜色对应变化。
2点击右边字母跳到不同的位置
let tip = e.currentTarget.dataset.info;
let one = tip.split("-")[0];
let two = tip.split("-")[1];
this.setData({
intoPosition: one,
clickIndex: two,
topVal: one
}
)
这里我们根据scroll-into-view来做，具体可以参照scroll-view。
3.滑动时，当前区域所对应的字母放到最顶部，同时右边的小字母的颜色对应变化。
handleScroll: throttle(function(e) { // 节流
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, // 顶部标题栏的字母
clickIndex: i - 1, // 右边小字母的颜色的下标
})
return;
}
}
}),
4.选中之后返回，并替换一级页面的数据
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.代码中用到的节流方法
const throttle = (fn, wait = 0) => {
let lastTime = null
return function () {
let curTime = new Date()
// 距离下次触发fn还需等待的时间(如果没有lastTime说明是第一次，可以表示执行，即等待时间为0
let remainTime = lastTime ? wait - (curTime - lastTime) : 0
if (remainTime <= 0 || remainTime > wait) {
lastTime = curTime
return fn.apply(this, arguments)
}
}
}
以上就是在下分享的内容，有兴趣的可以看看小编上面发的源码，如果还有迷惑之处或者认为写的不好的地方，欢迎在下方评论区留言，我们共同进步哦😋
源码地址：https://github.com/Winner-Wei/country-phone-code
