uni-app中select下拉菜单

lsklike

已于 2022-08-17 16:08:54 修改

阅读量2.3w

点赞数 3

分类专栏： uniapp 文章标签： uni-app javascript 前端

于 2022-08-17 14:58:54 首次发布

本文链接：https://blog.csdn.net/lsklike/article/details/126385844

版权

uniapp 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了在uniapp开发过程中，由于原生不支持select、option标签，作者通过在DCloud插件市场找到select-lay组件来简化开发。该组件提供便捷的选项选择功能，并在示例代码中展示了如何引入组件、设置数据以及监听选中事件。通过这种方式，可以快速实现自定义的下拉选择效果，提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1:先在DCloud插件市场找到

select-lay - DCloud 插件市场

2:引入组件到项目中直接使用即可

//因为uniapp没有自带的select,option,需要自己写原生js,不过我觉得太浪费时间就自己找了个插件，也就别人封装的原生组件我拿来用
//一个叫select-lay的简捷组件
<view class="paymode">
	<select-lay class="seclectpaytype" :value="paytype" slabel="type" svalue="typeid" 		placeholder="请选择" :options="paymode" @selectitem="selectitem"></select-lay>
</view>

//data里
paymode: [{
    type: '支付宝',
    typeid: 3
}, {
    type: '微信支付',
    typeid: 4
}], //支付方式

methods: {
    selectitem(index, item) {
        this.payChannelid = item.typeid;
        console.log(this.payChannelid);
        if (index >= 0) {
            this.paytype = this.paymode[index].typeid;
        } else {
            this.paytype = ""
        }
    },
},
//value 类型String  默认展示的value值。slabel 类型String 默认值 label 自定义列表中键值对关系。svalue  类型String  自定义列表中键值对关系，该值对应value。options  类型Array 数据列表