微信小程序--下拉选择框组件封装,可CV直接使用

一、起因

        接到的项目需求,查看ui设计图后,由于微信小程序官方设计的下拉选择框不符合需求,而且常用的第三方库也没有封装类似的,所以选择自己自定义组件。在此记录一下,方便日后复用。

        ui设计图如下:

        

        微信官方提供的选择框

        对比发现并不能实现我们想要的功能。

二、自定义组件 

2.1 封装品牌组件

代码如下

  • wxml
<view class="select_all_view"><!-- 内容说明,可以没有 --><view class="select_title" wx:if="{{title}}">{{title}}</view><view class="select_view"><!-- 输入框 --><view class="inputPlaceholder" bindtap="startChange"><text class="text" wx:if='{{select}}' >{{select}}</text><text class="text" wx:else="{{select}}" >{{placeholder}}</text><view class="icon" wx:if='{{changable}}'><van-icon name="arrow-down" /></view><view class="icon" wx:else='{{changable}}'><van-icon name="arrow" /></view></view><!-- 下拉展开后的可选择内容 --><view class="content" wx:if='{{changable}}'><view class="{{item.id==selectId ? 'active':''}}" wx:for="{{selectcontent}}" wx:key="idnex" bindtap="changecontent" data-datavalue="{{item}}">{{item.name}}</view></view></view>
</view>
  • wxss
/* components/select-postSale.wxss */
.select_all_view{display: flex;z-index: 999;}.select_view{display: inline;width: 200rpx;height: 64rpx;}.select_title{margin-right: 10rpx;}.inputPlaceholder{min-width: 230rpx;height: 64rpx;background: #FFFFFF;border: 2rpx solid #D9D9D9;border-radius: 12rpx 12rpx 12rpx 12rpx;padding: 4rpx 0rpx 10rpx 10rpx;border-radius: 10rpx;position: relative;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;font-size: 28rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #000000;line-height: 33rpx;}.select_view .inputPlaceholder .text{height: 40rpx;position: relative;top: 16rpx;left: 12rpx;}.icon{position: absolute;right: 12rpx;top: 20rpx;}.content{position: absolute;z-index: 999;min-width: 200rpx;max-height: 208rpx;background: #FFFFFF;box-shadow: 0rpx 12rpx 32rpx 0rpx rgba(0,0,0,0.08), 0rpx 6rpx 12rpx -8rpx rgba(0,0,0,0.12), 0rpx 18rpx 56rpx 16rpx rgba(0,0,0,0.05);border-radius: 16rpx 16rpx 16rpx 16rpx;opacity: 1;margin-top: 8rpx;padding: 20rpx;overflow-x: hidden;overflow-y: scroll;display: flex;flex-direction: column;justify-content: center;align-items: center;}.content>.inputPlaceholder{padding: 10rpx 0;}.select_view .active{color:#46678d;}
  • json
{"component": true,"usingComponents": {"van-icon": "@vant/weapp/icon/index"}
}
  •  js
// components/select-postSale.js
Component({properties: {title:{type: String,value: ""},nameList: {type: Array,value: [],observer: function(){//有的时候选项组是后端获取数据来的,初始化时可能为[],所以这里使用obersver,当父组件中值改变时触发this.processData();}},nowId: {type: Number,value: -1},nowName: {type: String,value: "",observer: function(){this.setData({select: this. properties.nowName,selectId: this.properties.nowId,});}},placeholder: {type: String,value: ""}},/*** 页面的初始数据*/data: {selectcontent: [],changable: false, //箭头切换select: undefined, //选中的值selectId: undefined, //选中的id},methods: {// 下拉框收起和展开startChange(e) {this.setData({changable: !this.data.changable})},// 选择数据后回显changecontent(e) {this.setData({select: e.currentTarget.dataset.datavalue.name,selectId: e.currentTarget.dataset.datavalue.id,changable: false})this.triggerEvent("handleChange", {selectId: this.data.selectId, select: this.data.select});//向父组件传参},//处理数据,复制一遍,因为子组件不能直接改变父组件的传进来的值。processData(){let options = [];let that = this;this.properties.nameList.forEach((item) => {options.push({id: item.id,name: item.name,});}); //forEachthis.setData({selectcontent: options,select: that.properties.nowName,selectId: that.properties.nowId,});}}})

2.2 组件调用

        在要使用组件的页面js中添加自己想要的数据

  • js
 data: {curfId: 1,brandList: [{name: "万达影视" ,id: 1},{name: "金逸影视" ,id: 2},{name: "CGV" ,id: 3}],curBrandName:"万达影视" ,
}
  • wxml 
<select-postSale nowId="{{curfId}}" nameList="{{brandList}}" nowName="{{curBrandName}}" placeholder="请选择品牌" bind:handleChange="changeBrand"></select-postSale>

    ui设计图与效果对比

        可以看到效果已经基本实现.具体细节需要优化一下

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/102062.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

video_topic

使用qt5,ffmpeg6.0,opencv&#xff0c;os2来实现。qt并非必要&#xff0c;只是用惯了。 步骤是&#xff1a; 1.读取rtsp码流&#xff0c;转换成mat图像 2.发送ros::mat图像 项目结构如下&#xff1a; videoplayer.h #ifndef VIDEOPLAYER_H #define VIDEOPLAYER_H#include …

企业数字化营销策略如何制定?企业开展数字化营销有的关键步骤?

​制定数字化营销策略是建立数字化营销体系的关键步骤&#xff0c;想要建立好的数字化营销策划&#xff0c;需要企业明确目标客户群体&#xff0c;通过了解他们的需求和行为&#xff0c;来制定相应的营销策略。例如&#xff0c;通过数据分析手段&#xff0c;企业可以确定目标客…

一个tomcat下如何部署多个项目?

1、不修改端口&#xff0c;部署多个项目 清楚tomcat目录结构的应该都知道&#xff0c;项目包是放在webapps目录下的&#xff0c;那能否在同一个tomcat的webapps目录下运行多个不同项目呢&#xff1f; 答案是可以的。 1、将多个项目包放入webapps文件夹下 2、修改conf下的serv…

【师兄啊师兄2】公布,李长寿成功渡劫,敖乙叛变,又一美女登场

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫资讯。 由玄机制作的师兄啊师兄第一季这才完结没有多久&#xff0c;没想到现在第二季就公布了&#xff0c;连海报和预告都出来了&#xff0c;看样子已经做得差不多了。预告看下来&#xff0c;能够明显感觉到官方又进步…

ad5665r STM32 GD32 IIC驱动设计

本文涉及文档工程代码&#xff0c;下载地址如下 ad5665rSTM32GD32IIC驱动设计,驱动程序在AD公司提供例程上修改得到,IO模拟的方式进行IIC通信资源-CSDN文库 硬件设计 MCU采用STM32或者GD32,GD32基本上和STM32一样,针对ad566r的IIC时序操作是完全相同的. 原理图设计如下 与MC…

Linux系统之ip命令的基本使用

Linux系统之ip命令的基本使用 一、ip命令介绍1.1 ip命令简介1.2 ip命令的由来1.3 ip命令的安装包 二、ip命令使用帮助2.1 ip命令的help帮助信息2.2 ip命令使用帮助 三、查看网络信息3.1 显示当前网络接口信息3.2 显示网络设备运行状态3.3 显示详细设备信息3.4 查看路由表3.5 查…

Elasticsearch 分片内部原理—近实时搜索、持久化变更

目录 一、近实时搜索 refresh API 二、持久化变更 flush API 一、近实时搜索 随着按段&#xff08;per-segment&#xff09;搜索的发展&#xff0c;一个新的文档从索引到可被搜索的延迟显著降低了。新文档在几分钟之内即可被检索&#xff0c;但这样还是不够快。 磁盘在这…

2023年中国车用磁传感器市场发展趋势分析:未来市场规模将保持较高速增长趋势[图]

磁传感器是把磁场、电流、应力应变、温度、光等外界因素引起敏感元件磁性能变化转换成电信号&#xff0c;以这种方式来检测相应物理量的器件。磁传感器广泛用于现代工业和电子产品中以感应磁场强度来测量电流、位置、方向等物理参数。在现有技术中&#xff0c;有许多不同类型的…

WIN10如何搭建自己的博客

引言&#xff1a; 路线说明&#xff1a; 在CSDN&#xff0c;博客园&#xff0c;简书等平台&#xff0c;可以直接在上面发表&#xff0c;用户交互做的好&#xff0c;写的文章百度也能搜索的到&#xff0c;这样速度也是最快的&#xff0c;不费心运营啥的。缺点是比较不自由&…

工作杂记-YUV的dump和read

工作小记-YUV的dump和read 工作杂记-YUV的dump和read利用dump生成图片 yuv2imgyuv2img代码 工作杂记-YUV的dump和read 工作中涉及到模型验证相关的工作&#xff0c;这里是三个模型的共同作用&#xff0c;在感知模型读取图片的时候&#xff0c;把输入替换成自己给定的输入&…

VBA入门2——程序结构

VBA基础入门2 VBA 程序结构VBA 程序结构入门&#xff08;认识 VBA 程序骨架&#xff09;循环结构判断结构 VBA 变量的声明和赋值&#xff08;使程序动起来&#xff09;不同变量类型声明语句如何声明多个变量声明变量是必须的嘛&#xff1f;变量赋值 VBA 程序顺序结构&#xff0…

3.3 数据定义

思维导图&#xff1a; 前言&#xff1a; **核心概念**&#xff1a; - 关系数据库支持**三级模式结构**&#xff1a;模式、外模式、内模式。 - 这些模式中包括了如&#xff1a;模式、表、视图和索引等基本对象。 - SQL的数据定义功能主要包括了模式定义、表定义、视图和索引的定…

Axure常用技巧及问题

以下内容将持续更新 目录 一、技巧1、版本选择2、快捷键3、定制工具栏 二、问题1、无法在浏览器预览2、发布到本地的HTML无法查看 一、技巧 1、版本选择 2、快捷键 3、定制工具栏 上方菜单栏-右键-自定义工具栏 二、问题 1、无法在浏览器预览 需要更改Axure配置 点击发布-…

C#之常见图形文件格式及其特点

部分内容来源于Microsoft相关文档&#xff01; 日常生活中和软件开发中&#xff0c;经常会用到图形文件格式&#xff1a; BMP BMP 是 Windows 用来存储与设备无关的图像和与应用程序无关的图像的标准格式。 给定 BMP 文件的每像素位数&#xff08;1、4、8、15、24、32 或 64…

嵌入式Linux裸机开发(六)EPIT 定时器

系列文章目录 文章目录 系列文章目录前言介绍配置过程 前言 前面学的快崩溃了&#xff0c;这也太底层了&#xff0c;感觉学好至少得坚持一整年&#xff0c;我决定这节先把EPIT学了&#xff0c;下面把常见三种通信大概学一下&#xff0c;直接跳过其他的先学移植了&#xff0c;有…

网页游戏的开发框架

网页游戏开发通常使用不同的开发框架和技术栈&#xff0c;以创建各种类型的游戏&#xff0c;从简单的HTML5游戏到复杂的多人在线游戏&#xff08;MMO&#xff09;等。以下是一些常见的网页游戏开发框架和它们的特点&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&a…

python安装geopy出现错误

python&#xff1a; 安装geopy出现错误 错误信息&#xff1a; 解决办法&#xff1a;再试一次 居然成功了&#xff0c;就是说&#xff0c;也不知道为什么

生产级Stable Diffusion AI服务部署指南【BentoML】

在本文中&#xff0c;我们将完成 BentoML 和 Diffusers 库之间的集成过程。 通过使用 Stable Diffusion 2.0 作为案例研究&#xff0c;你可以了解如何构建和部署生产就绪的 Stable Diffusion 服务。 推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 Stable Diffusion 2.0 …

uniapp微信小程序自定义封装分段器。

uniapp微信小程序自定义封装分段器。 话不多说先上效果 这里我用的是cil框架 vue3 下面贴代码 组价代码&#xff1a; <template><view class"page"><viewv-for"(item, index) in navList":key"index"click"changeNav(ind…

docker之Harbor私有仓库

目录 一、什么是Harbor 二、Harbor的特性 三、Harbor的构成 1、六个组件 2、七个容器 四、私有镜像仓库的上传与下载 五、部署docker-compose服务 把项目中的镜像数据进行打包持久数据&#xff0c;如镜像&#xff0c;数据库等在宿主机的/data/目录下&#xff0c; 一、什么…