日志

微信小程序首字母排序选择表 – wxSortPickerView

 来源: 本站整理    2017-06-10    82  

wxSortPickerView

wxSortPickerView-微信小程序首字母排序选择表

wxSortPickerView信息

  • 版本号0.1
  • 解决问题:wxSortPickerView-微信小程序首字母排序选择表

特性

目前为版本0.1,功能单一,但可扩展场景比较多。相关场景会在0.2中加入

  • 字符串数组首字母排序
  • 左侧点击abc跳转
  • 点击item返回数据

扩展

  • 姓名排序选择
  • 地址排序选择

功能预览

使用方式

  • 1.引入相关文件

  • 2.初始化

var wxSortPickerView = require('../../wxSortPickerView/wxSortPickerView.js');
onLoad: function () {
    console.log('onLoad')
    var that = this
    //初始化
    wxSortPickerView.init(["艾–Ai","安–Ann/An","敖–Ao","巴–Pa","白–Pai","包/鲍–Paul/Pao","班–Pan","贝–Pei","毕–Pih","卞–Bein","卜/薄–Po/Pu","步–Poo","百里–Pai-li","蔡/柴–Tsia/Choi/Tsai","曹/晁/巢–Chao/Chiao/Tsao","岑–Cheng","崔–Tsui","查–Cha","常–Chiong","车–Che","陈–Chen/Chan/Tan","成/程–Cheng","池–Chi","褚/楚–Chu","淳于–Chwen-yu","戴/代–Day/Tai","邓–Teng/Tang/Tung","狄–Ti","刁–Tiao","丁–Ting/T","董/东–Tung/Tong","窦–Tou","杜–To/Du/Too","段–Tuan","端木–Duan-mu","东郭–Tung-kuo","东方–Tung-fang","范/樊–Fan/Van","房/方–Fang","费–Fei","冯/凤/封–Fung/Fong","符/傅–Fu/Foo","G:","盖–Kai","甘–Kan","高/郜–Gao/Kao","葛–Keh","耿–Keng","弓/宫/龚/恭–Kung","勾–Kou","古/谷/顾–Ku/Koo","桂–Kwei","管/关–Kuan/Kwan","郭/国–Kwok/Kuo","公孙–Kung-sun","公羊–Kung-yang","公冶–Kung-yeh","谷梁–Ku-liang","海–Hay","韩–Hon/Han","杭–Hang","郝–Hoa/Howe","何/贺–Ho","桓–Won","侯–Hou","洪–Hung","胡/扈–Hu/Hoo","花/华–Hua","宦–Huan","黄–Wong/Hwang","霍–Huo","皇甫–Hwang-fu","呼延–Hu-yen","I:","J:","纪/翼/季/吉/嵇/汲/籍/姬–Chi","居–Chu","贾–Chia","翦/简–Jen/Jane/Chieh","蒋/姜/江/–Chiang/Kwong","焦–Chiao","金/靳–Jin/King","景/荆–King/Ching","讦–Gan","K:","阚–Kan","康–Kang","柯–Kor/Ko","孔–Kong/Kung","寇–Ker","蒯–Kuai","匡–Kuang","L:","赖–Lai","蓝–Lan","郎–Long","劳–Lao","乐–Loh","雷–Rae/Ray/Lei","冷–Leng","黎/郦/利/李–Lee/Li/Lai/Li","连–Lien","廖–Liu/Liao","梁–Leung/Liang","林/蔺–Lim/Lin","凌–Lin","柳/刘–Liu/Lau","龙–Long","楼/娄–Lou","卢/路/陆鲁–Lu/Loo","伦–Lun","罗/骆–Loh/Lo/Law/Lam/Rowe","吕–Lui/Lu","令狐–Lin-hoo","M:","马/麻–Ma","麦–Mai/Mak","满–Man/Mai","毛–Mao","梅–Mei","孟/蒙–Mong/Meng","米/宓–Mi","苗/缪–Miau/Miao","闵–Min","穆/慕–Moo/Mo","莫–Mok/Mo","万俟–Moh-chi","慕容–Mo-yung","N:","倪–Nee","甯–Ning","聂–Nieh","牛–New/Niu","农–Long","南宫–Nan-kung","欧/区–Au/Ou","欧阳–Ou-yang","P:","潘–Pang/Pan","庞–Pang","裴–Pei/Bae","彭–Phang/Pong","皮–Pee","平–Ping","浦/蒲/卜–Poo/Pu","濮阳–Poo-yang","Q:","祁/戚/齐–Chi/Chyi/Chi/Chih","钱–Chien","乔–Chiao/Joe","秦–Ching","裘/仇/邱–Chiu","屈/曲/瞿–Chiu/Chu","R:","冉–Yien","饶–Yau","任–Jen/Yum","容/荣–Yung","阮–Yuen","芮–Nei","S:","司–Sze","桑–Sang","沙–Sa","邵–Shao","单/山–San","尚/商–Sang/Shang","沈/申–Shen","盛–Shen","史/施/师/石–Shih/Shi","苏/宿/舒–Sue/Se/Soo/Hsu","孙–Sun/Suen","宋–Song/Soung","司空–Sze-kung","司马–Sze-ma","司徒–Sze-to","单于–San-yu","上官–Sang-kuan","申屠–Shen-tu","T:","谈–Tan","汤/唐–Town/Towne/Tang","邰–Tai","谭–Tan/Tam","陶–Tao","藤–Teng","田–Tien","童–Tung","屠–Tu","澹台–Tan-tai","拓拔–Toh-bah","U:","V:","W:","万–Wan","王/汪–Wong","魏/卫/韦–Wei","温/文/闻–Wen/Chin/Vane/Man","翁–Ong","吴/伍/巫/武/邬/乌–Wu/NG/Woo","X:","奚/席–Hsi/Chi","夏–Har/Hsia/(Summer)","肖/萧–Shaw/Siu/Hsiao","项/向–Hsiang","解/谢–Tse/Shieh","辛–Hsing","刑–Hsing","熊–Hsiung/Hsiun","许/徐/荀–Shun/Hui/Hsu","宣–Hsuan","薛–Hsueh","西门–See-men","夏侯–Hsia-hou","轩辕–Hsuan-yuen","Y:","燕/晏/阎/严/颜–Yim/Yen","杨/羊/养–Young/Yang","姚–Yao/Yau","叶–Yip/Yeh/Yih","伊/易/羿–Yih/E","殷/阴/尹–Yi/Yin/Ying","应–Ying","尤/游–Yu/You","俞/庾/于/余/虞/郁/余/禹–Yue/Yu","袁/元–Yuan/Yuen","岳–Yue","云–Wing","尉迟–Yu-chi","宇文–Yu-wen","Z:","藏–Chang","曾/郑–Tsang/Cheng/Tseng","訾–Zi","宗–Chung","左/卓–Cho/Tso","翟–Chia","詹–Chan","甄–Chen","湛–Tsan","张/章–Cheung/Chang","赵/肇/招–Chao/Chiu/Chiao/Chioa","周/邹–Chau/Chou/Chow","钟–Chung","祖/竺/朱/诸/祝–Chu/Chuh","庄–Chong","钟离–Chung-li","诸葛–Chu-keh"],that);
  },

  //处理��接受点击返回的文字
  wxSortPickerViewItemTap: function(e){
    console.log(e.target.dataset.text);
  }
微信小程序通讯录首字母索引效果,车辆品牌选择列表
日志效果图: wxml代码: <block wx:for="{{list}}"> <view class='letter'>{{index}}</view ...
1
小程序城市按首字母排序(如同苹果手机通讯录一样得效果)
日志如图 代码 <view class="input"> <input bindinput="bindKeyInput" bindblur=&qu ...
1
微信小程序——表单验证插件WxValidate的二次封装(终极版)
日志    微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自 ...
1
微信小程序简单个人信息表单页面
日志wxml部分:这里引用的icon小图标可以自主更换 <view> <view class="titleCss"> <text class=" ...
2
微信小程序-form表单-获取用户输入文本框的值
日志微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...
1
微信小程序开发07-列表页面怎么做
日志接上文: 微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有 ...
1
微信小程序图片选择,预览和删除
日志这里均用的是小程序原生api 废话不多说直接上栗子: <view class="addImv"> <!--这个是已经选好的图片--> <view wx ...
2
微信小程序选择并上传图片
日志上传图片 API: wx.chooseImage() 和 wx.uploadFile() wx.chooseImage({ count: 1, // 默认9 sizeType: ['original' ...
2
转载:第二弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿!每日更新!
日志今天一波三折,承受了超出预料的压力和煎熬,最后还是决定继续放出我的更新教程.我想我一没有泄露公司的代码,二没有提供泄露开发工具下载,只是从程序猿角度写了篇开发日志.我已经做好了最坏的准备,就算放弃这份 ...
1
转载:全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!
日志微信应用号(小程序,「应用号」的新称呼)终于来了! 目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」? 我们暂时以 ...
1
微信小程序——选择某个区间的数字
日志 很久没有更新文章啦~~记录下今天弄的一个小功能. 先上图: 需求很简单: 第1列改变的时候,第2列也随着改变,并且比第1列大1k. 这里用到了微信的picker 组件,对于不太熟练这个组件的小伙伴可 ...
2
微信小程序之表单验证
日志表单验证 何为表单验证呢? 百度百科给出的回答是这样的: 表单验证是javascript中的高级选项之一.JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 [ ...
1
微信小程序之表单提交
日志页面绑定很多事件! <view class="content"> <view class="user personal_func_list"& ...
1
微信小程序 选择微信自带的地址 用户授权选择了拒绝
日志// 选择微信自带地址 addAddr:function () { wx.chooseAddress({ success: function (res) { self.setData({ addrIn ...
2
微信小程序 PHP后端form表单提交实例详解
日志微信小程序php后端form表单 https://www.cnblogs.com/tdalcn/p/7092716.html 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了 ...
3
微信小程序 - 表单验证插件WxValidate(自定义警告信息形式)
日志弹出的形式对于用户来说,总是不太友好的 可能会出现层级问题(只需要设置一下提示的层级即可)   WxValidate内置规则 以下代码拷贝即可使用~ wxml <form bindsubmit= ...
微信小程序 - 表单验证插件WxValidate使用
日志Github地址:WxValidate 1. 拷贝至util目录 2.项目引入 3.查看wxml匹配规则,通过name  4.在js配置规则 import WxValidate from '../.. ...
1
转:微信小程序 微信小程序-拍照或选择图片并上传文件
日志调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobj ...
2
微信小程序:input输入框和form表单几种传值和取值方式
日志1.传值:index下标传值.页面navigator传值 1.index下标 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.data ...
1