微信小程序：楼层效果（电话区号、城市列表）

当我们的业务需求不仅限制于国内的话，那么我们在登录的时候这个手机号就会有所变动，因为每个国家的电话区号不一样，所以呢，以下就是今天我给大家分享的内容，大家先看一下下面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>

注意：

1. 这里尤其注意的是 必须得给容器设置固定的高度，这里我们需要的是需要满屏，所以就说100vh了。
2. 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