用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

楼层效果(电话区号、城市列表)

Rolan 2021-7-23 00:57

当我们的业务需求不仅限制于国内的话,那么我们在登录的时候这个手机号就会有所变动,因为每个国家的电话区号不一样,所以呢,以下就是今天我给大家分享的内容,大家先看一下图,大概是这个样子的:这里我们用到的组 ...

当我们的业务需求不仅限制于国内的话,那么我们在登录的时候这个手机号就会有所变动,因为每个国家的电话区号不一样,所以呢,以下就是今天我给大家分享的内容,大家先看一下图,大概是这个样子的:


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


著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 开心boy 来自: 简书