微信小程序开发: 区号选择，展示楼层效果（电话区号、城市列表）

这里我们用到的组件是scroll-view，大家下来可以看看文档哦，挺好上手的

wxml

        
            {{item.key === 'hot' ? '热门国家或地区' : item.key}}
            
                
                    {{item1.countryName}}
                    +{{item1.phoneCode}}
                 
             
         

注意：

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  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  wait) {
            lastTime = curTime
            return fn.apply(this, arguments)
        }
    }
}