欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > wxaSortPicker小程序首字母排序选择器

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:789

HTML5自适应律师工作室类网

2020-04-04   浏览:654

高端HTML5响应式企业通用网

2020-05-06   浏览:560

html5响应式外贸网站英文版

2020-05-08   浏览:545

HTML5影视传媒文化公司类网

2020-05-12   浏览:543

wxaSortPicker小程序首字母排序选择器

发布时间:2020-10-30  
wxaSortPicker

版本号1.0.1 
github地址: https://github.com/nickrogit/wxaSortPicker 
说明:小程序首字母排序选择器,网上有不少但觉得不太好,自己优化改进的这款觉得还不错,后面再慢慢完善丰富。

 

版本说明

1.0.0版本仅支持字符串数组 
1.0.1版本加入json数组支持,如:[{name:'中国',value:'China'},{name:'美国',value:'America'}],value取值e.target.dataset.value,其他不变

 

功能

字符串数组首字母排序 
右侧点击字母定位 
点击item返回数据

 

开发要点

解析汉字Unicode编码并排序 
小程序scroll-view组件的scroll-into-view属性,点击右侧字母改变scroll-into-view的属性值,定位。 
scroll-into-view(值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素),

 

适用场景

城市、国籍、通讯录等字母排序

 

功能预览

wxaSortPicker小程序首字母排序选择器

wxaSortPicker小程序首字母排序选择器

 

使用方式

引入相关文件并初始化,详情参看pages/index/index

 

var wxaSortPicker = require('../../utils/wxaSortPicker/wxaSortPicker.js');

onLoad: function () {

var that = this

//初始化

/*wxaSortPicker.init([

"澳大利亚", "阿富汗", "巴哈马", "白俄罗斯", "比利时", "不丹", "巴西", "柬埔寨", "丹麦", "多米尼加","中国","蒙古","朝鲜","韩国","日本", "菲律宾","越南","老挝","缅甸","泰国","马来西亚","文莱","新加坡","印度尼西亚","东帝汶","尼泊尔","不丹","孟加拉国","印度","巴基斯坦","斯里兰卡","马尔代夫","哈萨克斯坦","吉尔吉斯斯坦","塔吉克斯坦","乌兹别克斯坦","土库曼斯坦","阿富汗","伊拉克","伊朗","叙利亚","约旦","黎巴嫩","以色列","巴勒斯坦","沙特阿拉伯","巴林","卡塔尔","科威特","阿拉伯联合酋长国","阿曼","也门","格鲁吉亚","亚美尼亚","阿塞拜疆","土耳其","塞浦路斯","芬兰","瑞典","挪威","冰岛","丹麦" ,"法罗群岛","爱沙尼亚","拉脱维亚","立陶宛","白俄罗斯","俄罗斯","乌克兰","摩尔多瓦","波兰","捷克","斯洛伐克","匈牙利","德国","奥地利","瑞士","列支敦士登","英国","爱尔兰","荷兰","比利时","卢森堡","法国","摩纳哥","罗马尼亚","保加利亚","塞尔维亚","马其顿","阿尔巴尼亚","希腊","斯洛文尼亚","克罗地亚","黑山","马耳他","波斯尼亚和黑塞哥维那", "意大利", "梵蒂冈", "圣马力诺", "西班牙", "葡萄牙", "安道尔", "直布罗陀", "哥斯达黎加", "巴拿马","加拿大","美国","墨西哥","格陵兰","圣皮埃尔和密克隆","危地马拉","伯利兹","萨尔瓦多","洪都拉斯","尼加拉瓜","澳大利亚","新西兰"

], that);*/

 

wxaSortPicker.init([

{ name: '中国', value: 'China'},

{ name: '俄罗斯', value: 'Russia' },

{ name: '美国', value: 'America' },

{ name: '澳大利亚', value: 'Australia' },

{ name: '巴西', value: 'Brazil' },

{ name: '韩国', value: 'Korea' },

{ name: '朝鲜', value: 'North Korea' },

{ name: '英国', value: 'Britain' },

{ name: '德国', value: 'Germany' },

{ name: '加拿大', value: 'Canada' },

{ name: '非洲', value: 'New Zealand' },

], that);

},

 

//选中返回值

wxaSortPickerItemTap: function(e){

console.log(e.target.dataset.text);

console.log(e.target.dataset.value);//字符串数组无此字段