uni-app中select下拉菜单

这篇具有很好参考价值的文章主要介绍了uni-app中select下拉菜单。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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 数据列表

uniapp select,uniapp,uni-app,javascript,前端文章来源地址https://www.toymoban.com/news/detail-659285.html

到了这里,关于uni-app中select下拉菜单的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 下拉框效果使用 uni-data-select标签

    uni-data-select v-model=\\\"formData.femMerchantsClassificationId\\\" :localdata=\\\"range\\\" @change=\\\"change\\\" /uni-data-select :localdata 绑定下拉框内容 当下拉框内容调用后端接口时候,写法:

    2024年02月11日
    浏览(32)
  • uni-app在app端设置下拉刷新不生效

    下拉刷新这个问题,查了老半天。 我这只小菜鸡,完全不知道view和scroll-view是不一样的! 按照官网的方式, 1. 在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh: true 2. 在页面中使用uni.startPullDownRefresh();以及uni.stopPullDownRefresh(); 可是可是,我

    2024年02月11日
    浏览(29)
  • uni-app —— 小程序实现左右菜单联动

    文章目录 前言 一、示意图 二、使用步骤 1.静态页面的布局 2.模拟数据格式 3.左侧菜单的点击效果 4.右侧菜单的联动效果 三、具体实现代码 1.页面结构 2.相关样式 3.业务逻辑部分 今天写出了一个新的小玩意儿,个人认为实现思路与方法还算值得学习,在这里分享给大家! 页

    2024年02月07日
    浏览(33)
  • uni-app下拉框 可实现输入下拉框 搜索+选择组合框功能

    插件示例地址

    2024年02月11日
    浏览(40)
  • uni-app封装省市区下拉组件(后台获取数据)

    一.后台数据格式  PROCINCE:[{itemName:\\\'\\\',itemValue:\\\'\\\'}] CITY:[{itemName:\\\'\\\',itemValue}] AREA:[{itemName:\\\'\\\',itemValue}] 前端将地址数据缓存在了pinia中 前端主要使用picker进行勾选 二.代码

    2024年02月12日
    浏览(39)
  • uni-app多选select组件,兼容多平台小程序、H5

          目录 介绍 平台差异说明 使用方式 安装 引入 基本使用 默认选中项(回显) 配置label、value对应的key名称 获取点击确认后的结果 完整示例 API Props Option Attributes Slot Events 多选select组件目前只支持多选,单选请用单选select组件 支持配置段 兼容多平台小程序、H5

    2024年02月09日
    浏览(37)
  • uni-app实现分页--(1)准备工作,首页下拉触底加载更多

    实现流程如下: 分析:需要在滚动容器中添加滚动触底,在猜你喜欢中获取数据。难点:如何在父页面调用子组件内的方法。父组件中用ref,并定义组件实例类型,子组件中暴露方法 具体代码如下: 1.在父组件中添加scrolltolower事件,用于调用子组件方法获取数据 2.给子组件添

    2024年04月11日
    浏览(35)
  • uni-app微信小程序开发自定义select下拉多选内容篇

    欢迎点击领取 -《前端开发面试题进阶秘籍》:前端登顶之巅-最全面的前端知识点梳理总结 技术框架公司的选型:uni-app + uni-ui + vue3 + vite4 + ts 需求分析:微信小程序-uni-ui内容 1、创建一个自定义的下拉,支持多个内容的同时多选 2、定义好出入参数,支持回显内容等 3、绑定

    2024年02月13日
    浏览(29)
  • mescroll 在uni-app 运行的下拉刷新和上拉加载的组件

    官网传送门: https://www.mescroll.com/uni.html 最近使用到了mescroll 但是一直都是整个页面的滚动, 最近需求有需要局部滚动, 收藏了一个博主的文章觉得写的还挺好, 传送门: https://blog.csdn.net/Minions_Fatman/article/details/134754926?spm=1001.2014.3001.5506 使用总结 如果使用到的是mescroll-body 在给它

    2024年02月22日
    浏览(33)
  • 『UniApp』uni-app-打包成App

    大家好,我是 BNTang, 在上一节文章中,我给大家详细的介绍了如何将我开发好的项目打包为微信小程序并且发布到微信小程序商店 趁热打铁,在来一篇文章,给大家详细的介绍如何将项目打包成APP。 打包 App 也是一样的,首先需要配置关于 App 应用的基础信息,打开 manifest

    2024年02月04日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包