html5移动端选择城市,移动端城市选择插件(原创)

05d404611dc380631ff1c651fa427385.png

94a6dc5feabd4193c6b752bf51a273a1.png

插件描述:基于Vue移动端城市选择插件

更新时间:2020-09-06 00:32:37

更新说明:修改vue cdn调用地址访问更快

更新时间:2018/10/29 上午9:30:22

更新说明:

城市列表多添加了便签,解决移动端点击字母时触发到城市选择事件。

{{item.city}}

search方法添加 document.documentElement.scrollTop=0; 解决出现滚动条后点击搜索,搜索结果被header遮挡的问题//搜索框获取焦点进入搜索层

search: function() {

this.isCancel = true;

document.documentElement.scrollTop = 0;

},

发布时间:2018-10-29 0:19

基于Vue的城市选择插件

字体文件可以不要

对应的input和组件()需要包含在对应盒子内(el:'.adminBox',)。

对应的城市写在cityChoice.js的citys数组内,//热门城市

hostCityss: function() {

var j = 0;

for (var i = 0; i 

Vue.set(this.hostCitys, j, this.citys[i]);

j++

}

},

前15条为热门城市,热门城市对应在citys数组内的顺序不能乱, 其他的随意。

需要添加首字母搜索的,需要在citys数组的对象内添加对应的内容

如citys:[

{city:'南宁',py:'nanning',first:'nn'},

]

然后搜索过滤处添加对应的方法//搜索过滤

sousuos:function(){

var ssval = this.ssval;

return this.citys.filter(function (item) {

return item.py.indexOf(ssval)!= -1 || item.city.indexOf(ssval) != -1 || item.first.indexOf(ssval)!= -1;

});

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值