AI 助理
备案控制台
开发者社区 人工智能 文章 正文

uview下拉菜单Dropdown整合个性化下拉

2024-10-15 93
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： uview下拉菜单Dropdown整合个性化下拉

该组件必须结合u-dorpdown和u-dropdown-item一起使用，展开的内容由u-dropdown-item通过传递参数或者slot提供

u-dropdown-item每个独立下拉菜单

组件的菜单栏标题由u-dropdown-item通过title参数提供

u-dropdown-item带有默认的单选展示功能，通过options(见下方说明)配置，传入slot则会覆盖默认功能，通过v-model双向绑定options选中项的value值

<template>
  <view class="container container21094">
    <view class="flex diygw-dropdown diygw-col-24">
      <u-dropdown class="flex-sub" direction="down" ref="refDropdowns">
        <u-dropdown-item @change="changeDropdowns0" v-model="dropdowns0" title="菜单一" :options="dropdownsDatas0"></u-dropdown-item>
        <u-dropdown-item @change="changeDropdowns1" v-model="dropdowns1" title="菜单二" :options="dropdownsDatas1"></u-dropdown-item>
      </u-dropdown>
    </view>
    <view class="clearfix"></view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        //用户全局信息
        userInfo: {},
        //页面传参
        globalOption: {},
        //自定义全局变量
        globalData: {},
        dropdowns0: '',
        dropdowns1: '',
        dropdownsDatas0: [
          { text: '全部商品', value: '0' },
          { text: '新款商品', value: '1' },
          { text: '活动商品', value: '2' }
        ],
        dropdownsDatas1: [
          { text: '默认排序', value: '0' },
          { text: '好评排序', value: '1' },
          { text: '销量排序', value: '2' }
        ]
      };
    },
    onShow() {
      this.setCurrentPage(this);
    },
    onLoad(option) {
      this.setCurrentPage(this);
      if (option) {
        this.setData({
          globalOption: this.getOption(option)
        });
      }
 
      this.init();
    },
    methods: {
      async init() {},
      closeDropdowns() {
        this.$refs.refDropdowns.close();
      },
      changeDropdowns0(evt) {
        let item = this.dropdownsDatas0.find((item) => {
          return item.value == evt;
        });
        item && item.action && this.navigateTo(item.action);
      },
      changeDropdowns1(evt) {
        let item = this.dropdownsDatas1.find((item) => {
          return item.value == evt;
        });
        item && item.action && this.navigateTo(item.action);
      }
    }
  };
</script>
 
<style lang="scss" scoped>
  .container21094 {
  }
</style>

配置选项卡默认功能

如上所示，u-dropdown-item具有默认的单选功能，这里主要讲解其options和v-model参数：

options参数为一个数组，元素为对象，其中label为需要展示的提示文字，value为点击时双向绑定给v-model的值，v-model初始化时如果设置 某个options中的value，则该条目将会被默认选中：


配置选项卡自定义功能

在选项卡默认的单选功能无法满足的时候，我们可以给u-dropw-item传递slot来自定义需要展示的内容。

价格区间下拉菜单的设计


户型下拉设计

生成源码效果

查看源码

<template>
  <view class="container container21094">
    <u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
      <view class="flex diygw-dropdown diygw-col-24">
        <u-dropdown class="flex-sub" direction="down" ref="refDropdowns">
          <u-dropdown-item title="价格">
            <view class="bg-white">
              <view class="flex flex-wrap diygw-col-24 flex-direction-column">
                <text class="diygw-col-24 text1-clz"> 价格区间（万） </text>
                <view class="flex diygw-col-24 items-center flex-nowrap flex1-clz">
                  <u-form-item class="diygw-col-0 start-clz diygw-form-item-notpadding" labelPosition="top" prop="start">
                    <u-input :focus="formData.startFocus" placeholder="请输入最低价格" v-model="form.start"></u-input>
                  </u-form-item>
                  <text class="diygw-col-0 text-clz"> 至 </text>
                  <u-form-item class="diygw-col-0 end-clz diygw-form-item-notpadding" labelPosition="top" prop="end">
                    <u-input :focus="formData.endFocus" placeholder="请输入最高价格" v-model="form.end"></u-input>
                  </u-form-item>
                </view>
                <u-form-item labelWidth="auto" class="diygw-col-24 ucheckbox2-clz diygw-form-item-notpadding" labelPosition="top" prop="ucheckbox2">
                  <diy-checkbox class="diygw-col-24" activeColor="#ff5c47" activeBgColor="#ffecee" mode="radio" v-model="form.ucheckbox2" :list="formData.ucheckbox2Datas" @change="changeFormUcheckbox2"> </diy-checkbox>
                </u-form-item>
                <view class="flex flex-wrap diygw-col-24 flex2-clz">
                  <button @click="resetForm" class="diygw-col-8 btn-clz diygw-btn-default">重置</button>
                  <button @click="submitForm" class="diygw-col-0 btn1-clz diygw-btn-default">确定</button>
                </view>
              </view>
              <view class="clearfix"></view>
            </view>
          </u-dropdown-item>
          <u-dropdown-item title="户型">
            <view class="bg-white">
              <view class="flex flex-wrap diygw-col-24 flex-direction-column">
                <u-form-item labelWidth="auto" class="diygw-col-24 ucheckbox-clz diygw-form-item-notpadding" label="居室" labelPosition="top" prop="ucheckbox">
                  <diy-checkbox class="diygw-col-24" activeColor="#ff5c47" activeBgColor="#ffecee" mode="checkbox" v-model="form.ucheckbox" :list="formData.ucheckboxDatas" @change="changeFormUcheckbox"> </diy-checkbox>
                </u-form-item>
                <u-form-item labelWidth="auto" class="diygw-col-24 ucheckbox3-clz diygw-form-item-notpadding" label="居室" labelPosition="top" prop="ucheckbox3">
                  <diy-checkbox class="diygw-col-24" activeColor="#ff5c47" activeBgColor="#ffecee" mode="checkbox" v-model="form.ucheckbox3" :list="formData.ucheckbox3Datas" @change="changeFormUcheckbox3"> </diy-checkbox>
                </u-form-item>
                <u-form-item labelWidth="auto" class="diygw-col-24 ucheckbox1-clz diygw-form-item-notpadding" label="卫生间" labelPosition="top" prop="ucheckbox1">
                  <diy-checkbox class="diygw-col-24" activeColor="#ff5c47" activeBgColor="#ffecee" mode="checkbox" v-model="form.ucheckbox1" :list="formData.ucheckbox1Datas" @change="changeFormUcheckbox1"> </diy-checkbox>
                </u-form-item>
                <view class="flex flex-wrap diygw-col-24 flex3-clz">
                  <button @click="resetForm" class="diygw-col-8 btn2-clz diygw-btn-default">重置</button>
                  <button @click="submitForm" class="diygw-col-0 btn3-clz diygw-btn-default">确定</button>
                </view>
              </view>
              <view class="clearfix"></view>
            </view>
          </u-dropdown-item>
          <u-dropdown-item title="排序">
            <view class="bg-white">
              <view class="flex flex-wrap diygw-col-24 flex-direction-column">
                <u-form-item class="diygw-col-24 sortby-clz" labelPosition="top" prop="sortby">
                  <u-radio-group iconPlacement="right" class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between" v-model="form.sortby" :iconSize="16">
                    <u-radio activeImg="/static/g.png" img="/static/g1.png" class="diygw-col-24" shape="circle" v-for="(sortbyitem, sortbyindex) in formData.sortbyDatas" :key="sortbyindex" :name="sortbyitem.value">
                      {{ sortbyitem.label }}
                    </u-radio>
                  </u-radio-group>
                </u-form-item>
                <view class="flex flex-wrap diygw-col-24 flex6-clz">
                  <button @click="resetForm" class="diygw-col-8 btn4-clz diygw-btn-default">重置</button>
                  <button @click="submitForm" class="diygw-col-0 btn5-clz diygw-btn-default">确定</button>
                </view>
              </view>
              <view class="clearfix"></view>
            </view>
          </u-dropdown-item>
        </u-dropdown>
      </view>
    </u-form>
    <view class="clearfix"></view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        //用户全局信息
        userInfo: {},
        //页面传参
        globalOption: {},
        //自定义全局变量
        globalData: {},
        dropdowns0: '',
        dropdowns1: '',
        dropdowns2: '',
        dropdownsDatas0: [
          { text: '', value: '0' },
          { text: '新款商品', value: '1' },
          { text: '活动商品', value: '2' }
        ],
        dropdownsDatas1: [
          { text: '默认排序', value: '0' },
          { text: '好评排序', value: '1' },
          { text: '销量排序', value: '2' }
        ],
        dropdownsDatas2: [
          { text: '综合排序', value: '0' },
          { text: '总价从低至高', value: '1' },
          { text: '总价从高至低', value: '2' }
        ],
        form: {
          start: '',
          end: '',
          ucheckbox2: '',
          ucheckbox: [],
          ucheckbox3: [],
          ucheckbox1: [],
          sortby: '1'
        },
        formRules: {},
        formData: {
          startFocus: false,
          endFocus: false,
          ucheckbox2Datas: [
            { value: '-1', label: '不限', disabled: false },
            { value: '2', label: '50万以下', disabled: false },
            { value: '3', label: '50-80万', disabled: false },
            { value: '4', label: '80-100万', disabled: false },
            { value: '5', label: '100-150万', disabled: false },
            { value: '6', label: '150-200万', disabled: false },
            { value: '7', label: '200-300万', disabled: false },
            { value: '8', label: '300万以上', disabled: false }
          ],
          ucheckboxDatas: [
            { value: '1', label: '一室', disabled: false },
            { value: '2', label: '二室', disabled: false },
            { value: '3', label: '三室', disabled: false },
            { value: '4', label: '四室', disabled: false },
            { value: '5', label: '五室', disabled: false },
            { value: '6', label: '五室以上', disabled: false }
          ],
          ucheckbox3Datas: [
            { value: '1', label: '一室', disabled: false },
            { value: '2', label: '二室', disabled: false },
            { value: '3', label: '三室', disabled: false },
            { value: '4', label: '四室', disabled: false },
            { value: '5', label: '五室', disabled: false },
            { value: '6', label: '五室以上', disabled: false }
          ],
          ucheckbox1Datas: [
            { value: '1', label: '一卫', disabled: false },
            { value: '2', label: '二卫', disabled: false },
            { value: '3', label: '三卫', disabled: false },
            { value: '4', label: '四卫', disabled: false },
            { value: '5', label: '五卫', disabled: false },
            { value: '6', label: '五卫以上', disabled: false }
          ],
          sortbyDatas: [
            { value: '1', label: '综合排序', checked: true },
            { value: '2', label: '总价从低至高', checked: false },
            { value: '3', label: '总价从高至低', checked: false },
            { value: '4', label: '单价从低至高', checked: false },
            { value: '5', label: '单价从高至低', checked: false }
          ]
        }
      };
    },
    onShow() {
      this.setCurrentPage(this);
    },
    onLoad(option) {
      this.setCurrentPage(this);
      if (option) {
        this.setData({
          globalOption: this.getOption(option)
        });
      }
 
      this.init();
    },
    onReady() {
      this.$refs.formRef?.setRules(this.formRules);
    },
    methods: {
      async init() {
        await this.initResetform();
      },
      closeDropdowns() {
        this.$refs.refDropdowns.close();
      },
      changeDropdowns0(evt) {
        let item = this.dropdownsDatas0.find((item) => {
          return item.value == evt;
        });
        item && item.action && this.navigateTo(item.action);
      },
      changeDropdowns1(evt) {
        let item = this.dropdownsDatas1.find((item) => {
          return item.value == evt;
        });
        item && item.action && this.navigateTo(item.action);
      },
      changeDropdowns2(evt) {
        let item = this.dropdownsDatas2.find((item) => {
          return item.value == evt;
        });
        item && item.action && this.navigateTo(item.action);
      },
      changeFormUcheckbox2(evt) {},
      changeFormUcheckbox(evt) {},
      changeFormUcheckbox3(evt) {},
      changeFormUcheckbox1(evt) {},
      initResetform() {
        this.initform = JSON.stringify(this.form);
      },
      resetForm() {
        this.form = JSON.parse(this.initform);
      },
 
      async submitForm(e) {
        this.$refs.formRef?.setRules(this.formRules);
 
        this.$nextTick(async () => {
          let valid = await this.$refs.formRef.validate();
          if (valid) {
            //保存数据
            let param = this.form;
            let header = {};
            let url = '';
            if (!url) {
              this.showToast('请先配置表单提交地址', 'none');
              return false;
            }
 
            let res = await this.$http.post(url, param, header, 'json');
 
            if (res.code == 200) {
              this.showToast(res.msg, 'success');
            } else {
              this.showModal(res.msg, '提示', false);
            }
          } else {
            console.log('验证失败');
          }
        });
      }
    }
  };
</script>
 
<style lang="scss" scoped>
  .text1-clz {
    padding-top: 20rpx;
    font-weight: bold;
    padding-left: 20rpx;
    font-size: 28rpx !important;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .flex1-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .start-clz {
    flex: 1;
  }
  .text-clz {
    padding-top: 10rpx;
    font-weight: bold;
    padding-left: 20rpx;
    font-size: 28rpx !important;
    padding-bottom: 10rpx;
    padding-right: 20rpx;
  }
  .end-clz {
    flex: 1;
  }
  .ucheckbox2-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .flex2-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .btn-clz {
    background-color: #e2e2e2;
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    overflow: hidden;
    color: #080808;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-left-radius: 12rpx;
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
    text-align: center;
    padding-right: 20rpx;
  }
  .btn1-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    color: #fff;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 12rpx;
    margin-right: 0rpx;
    background-color: #ff5c47;
    margin-left: 10rpx;
    overflow: hidden;
    flex: 1;
    border-top-left-radius: 12rpx;
    margin-top: 0rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 0rpx;
    text-align: center;
    padding-right: 20rpx;
  }
  .ucheckbox-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .ucheckbox3-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .ucheckbox1-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .flex3-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .btn2-clz {
    background-color: #e2e2e2;
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    overflow: hidden;
    color: #080808;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-left-radius: 12rpx;
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
    text-align: center;
    padding-right: 20rpx;
  }
  .btn3-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    color: #fff;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 12rpx;
    margin-right: 0rpx;
    background-color: #ff5c47;
    margin-left: 10rpx;
    overflow: hidden;
    flex: 1;
    border-top-left-radius: 12rpx;
    margin-top: 0rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 0rpx;
    text-align: center;
    padding-right: 20rpx;
  }
  .sortby-clz {
    font-weight: bold;
    font-size: 28rpx !important;
  }
  .flex6-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .btn4-clz {
    background-color: #e2e2e2;
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    overflow: hidden;
    color: #080808;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-left-radius: 12rpx;
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
    text-align: center;
    padding-right: 20rpx;
  }
  .btn5-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    color: #fff;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 12rpx;
    margin-right: 0rpx;
    background-color: #ff5c47;
    margin-left: 10rpx;
    overflow: hidden;
    flex: 1;
    border-top-left-radius: 12rpx;
    margin-top: 0rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 0rpx;
    text-align: center;
    padding-right: 20rpx;
  }
  .container21094 {
  }
</style>


个性化下拉菜单就是这样轻松完成的。因为默认下拉菜单只是很简单的单选式下拉。

文章标签：
搜索推荐
diygwcom
目录
相关文章
嘘~！
|
7月前
|
JavaScript API 开发者
使用 u-navbar 组件实现页面导航和布局的完全指南
使用 u-navbar 组件实现页面导航和布局的完全指南
嘘~！
1549 0
艾尼麻麻
|
6月前
|
前端开发 Android开发 Windows
27. 【Android教程】下拉选择框 Spinner
27. 【Android教程】下拉选择框 Spinner
艾尼麻麻
247 2
diygwcom
|
2月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
diygwcom
137 5
破浪前进
|
7月前
|
移动开发 JavaScript 小程序
uView Collapse 折叠面板
uView Collapse 折叠面板
破浪前进
148 0
朝阳39
|
5月前
flutter 导航组件 AppBar （含顶部选项卡TabBar，抽屉菜单 drawer ，自定义导航图标）
flutter 导航组件 AppBar （含顶部选项卡TabBar，抽屉菜单 drawer ，自定义导航图标）
朝阳39
100 1
爱你三千遍斯塔克
|
5月前
|
前端开发 JavaScript
Elementplus如何使面包屑往左边移动，右边头像下拉菜单如何写，下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办，如何设置鼠标样式，如何使用阿里妈妈icon，如何点击icon全屏
Elementplus如何使面包屑往左边移动，右边头像下拉菜单如何写，下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办，如何设置鼠标样式，如何使用阿里妈妈icon，如何点击icon全屏
爱你三千遍斯塔克
100 0
Elementplus如何使面包屑往左边移动，右边头像下拉菜单如何写，下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办，如何设置鼠标样式，如何使用阿里妈妈icon，如何点击icon全屏
朝阳39
|
5月前
|
JavaScript
vue 弹窗翻页多选
vue 弹窗翻页多选
朝阳39
30 2
懒大王敲代码
|
7月前
《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作
《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作
懒大王敲代码
278 0
兜里只有三分钱~
uniapp下拉弹层选择框效果demo（整理）
uniapp下拉弹层选择框效果demo（整理）
兜里只有三分钱~
266 0
游客ruqdfvh2iuyqc
修改 elementui nav 下拉菜单内部样式
修改 elementui nav 下拉菜单内部样式
游客ruqdfvh2iuyqc
547 0

热门文章

最新文章

  • 1
    跟阿里云技术专家阙寒一起深度了解视频直播CDN技术
  • 2
    流批一体的近实时数仓的思考与设计
  • 3
    丰富、连接、待集成—MaxCompute 生态再出发
  • 4
    securecrt克隆会话与sshd 的 MaxSessions
  • 5
    Flink 消息聚合处理方案
  • 6
    VMware安装的相关文章
  • 7
    forever让nodejs应用后台执行
  • 8
    路边的烧烤摊杂感
  • 9
    size_type、size_t、differentce_type以及ptrdiff_t
  • 10
    一些链接
  • 1
    《人工智能知识图谱构建与应用的最新突破与成果》
    37
  • 2
    《零样本学习：突破瓶颈，开启智能新征程》
    25
  • 3
    《知识表示：开启人工智能学习与推理的密钥》
    27
  • 4
    《信息传播：人工智能助力驱散虚假信息阴霾》
    28
  • 5
    《多模态融合：开启智能新时代的钥匙》
    36
  • 6
    自学记录鸿蒙 API 13：实现人脸检测 Core Vision Face Detector
    66
  • 7
    阿里云先知安全沙龙(武汉站) ——AI赋能软件漏洞检测，机遇, 挑战与展望
    514
  • 8
    在线使用：Poe Ai网页版_pc版_poe ai中文官网入口
    21
  • 9
    java项目中jar启动执行日志报错：no main manifest attribute, in /www/wwwroot/snow-server/z-server.jar-jar打包的大小明显小于正常大小如何解决
    39
  • 10
    新手指南：人工智能poe ai 怎么用？国内使用poe记住这个方法就够了！
    34

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 图表样式智能美化工具
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)