uni-app nvue城市选择器 lh-select-city

系统管理员 2022-11-07 05:51 228阅读 0赞

推荐插件 https://ext.dcloud.net.cn/plugin?id=4375  
支持微信小程序 App nvue vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20210311154250384.gif]

<lhSelectCity
      :value="value"
      :windowHeight="windowHeight"
      :hotCitys="hotCitys"
      @onSelect="onSelectCity"
    />
    ## 参数说明
    hotCitys  热门城市
    value 当前选中城市
    windowHeight  scroll的高 也是滑块的高 记得带单位!!! px rpx upx都支持
    @onSelect   点击切换城市事件 参数为城市名称
    
    import lhSelectCity from '@/components/lh-select-city/index.nvue'
    	export default { 
    		components:{ lhSelectCity},
    		data() { 
    			return { 
    				hotCitys: [
    					'杭州',
    					'天津',
    					'北京',
    					'上海',
    					'深圳',
    					'广州',
    					'成都',
    					'重庆',
    					'厦门'
    				],
    				value: '杭州',
    				windowHeight:""
    			}
    		},
    		onLoad(){ 
    			// 计算出可用高度
    			 this.windowHeight = uni.getSystemInfoSync().windowHeight-100+"px";
    		},
    		methods: { 
    			onSelectCity(city) { 
    			//切换城市事件
    				console.log(city)
    			}
    		}
    	}

作者是本人市面上兼容nvue的太少了就自己写了一个  
有需要改进的或者意见都可以留言给我 尽力满足大家需求

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70]: /images/20221023/e3f36d78c57246a88c7a48ae5f19d691.png
[20210311154250384.gif]: /images/20221023/28ae224dc5984a0ea0e2296c0ae159bf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

相关 MUI实现城市二级联动选择器

引言城市的二级联动跟城市的三级联动差不多，不过使用的场景还是有一小点区别的，三级联动往往设计详细信息，而二级联动显示的是一个大概信息，比如在个人信息中要描述用户所在...

ゝ一纸荒年。/ 2024年04月17日 15:51/ 0 赞/ 109 阅读

相关 uniapp nvue 获取控件高度

注意是 id <uni-card id='uni-card' class="uni-card" is-shadow="true"> <view>

古城微笑少年丶/ 2022年12月28日 09:06/ 0 赞/ 364 阅读

相关 uniapp颜色选择器插件

颜色选择器地址 https://ext.dcloud.net.cn/plugin?id=403 导入 / 颜色选择器 / im

谁借莪１个温暖的怀抱￠/ 2022年12月01日 05:19/ 0 赞/ 607 阅读

相关 uniapp滚动选择器 picker

从底部弹起的滚动选择器 picker > 支持五种选择器, 通过mode来区分, 分别是普通选择器(selector), 多列选择器(multiSelector), 时间

小鱼儿/ 2022年11月27日 02:00/ 0 赞/ 737 阅读

相关 uniapp滑动选择器 slider

滑动选择器 slider 属性说明 1. min: 最小值 2. max: 最大值 3. step: 步长, 取值必须大于0, 并且可被(max - min)整除

水深无声/ 2022年11月27日 01:59/ 0 赞/ 567 阅读

相关 uniapp多项选择器-checkbox-group

多项选择器 > 多项选择器内部由多个checkbox组成 1. @change: 选中项改变时触发 2. value: checkbox的表示, 选中时触发chan

悠悠/ 2022年11月27日 00:39/ 0 赞/ 280 阅读

相关 uni-app nvue城市选择器 lh-select-city

推荐插件 https://ext.dcloud.net.cn/plugin?id=4375 支持微信小程序 App nvue vue ![在这里插入图片描述][wate

系统管理员/ 2022年11月07日 05:51/ 0 赞/ 229 阅读

相关 uniapp-城市选择插件

下载地址https://ext.dcloud.net.cn/plugin?id=115 使用： 1.将这5个文件夹放入component目录下 ![在这里插入图片描

电玩女神/ 2022年02月14日 01:54/ 0 赞/ 946 阅读

相关 uniapp中的picker选择器

目录一、普通选择器二、多列选择器三、时间选择器四、日期选择器 -------------------- 一、普通选择器 ![2021030621

心已赠人/ 2021年07月25日 15:56/ 0 赞/ 4003 阅读

相关 uniapp设置内容超出隐藏（vue/nvue

点点点效果 vue多行 vue单行 nvue vue多行 overflow: hidden; //超出部分隐藏

本是古典何须时尚/ 2021年07月24日 12:50/ 0 赞/ 1654 阅读