您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

微信小程序scroll-view实现左右联动

51自学网 2022-02-21 13:41:10
  javascript

本文实例为大家分享了微信小程序scroll-view实现左右联动的具体代码,供大家参考,具体内容如下

需求:项目中做了一个选择城市的需求,要求全国所有的省市区都按照中文首字母分类并排序,左侧的城市列表和右侧的字母列表实现双向联动。

第一步:根据腾讯提供的javascript SDK提供的接口,获取所有的省市区,并将省市区按照首字母进行分类排序。

let _this = this;_this.mapCtx = wx.createMapContext("myMap");        // 实例化API核心类        qqmapsdk = new QQMapWX({            key: MAP_KEY,        });         // 获取全国的城市列表        qqmapsdk.getCityList({            success: function (res) {                let list = res.result[0].concat(res.result[1], res.result[2]);                _this.allCity = list;                _this.cityList = _this.pySegSort(list);            },            fail: function (error) {                console.error(error);            },            complete: function (res) {                console.log(res);            },        });         pySegSort(arr) {            if (!String.prototype.localeCompare) return null;            let letters = "*ABCDEFGHJKLMNOPQRSTWXYZ".split("");            let zh = "阿八嚓哒
下载地址:
vue 的 Render 函数
Vue3封装 Message消息提示实例函数详解
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。