您好,小程序模板欢迎您。
小程序模板
当前位置 : 首页> 小程序教程> 微信小程序开发: 区号选择,展示楼层效果(电话区号、城市列表)

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

17364721-fb6a90544ba5eb32.gif


这里我们用到的组件是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 < 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)
        }
    }
}

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了