微信小程序--下拉选择框组件封装,可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 …

【DB2】—— 数据库表查询一直查不出来数据

问题描述 近日&#xff0c;数据库的测试环境中有一个打印日志表&#xff0c;一共有将近50w的数据&#xff0c;Java程序在查询的时候一直超时。 在DBvisualizer中查询数据无论是使用select * 还是 select count(*)查询的时候都是一直在执行&#xff0c;就是查询不到结果。 排查…

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

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

微信查券小助手,淘宝客公众号查券返利机器人搭建教程

微信查券小助手&#xff0c;淘宝客公众号查券返利机器人搭建教程 在今天的数字时代&#xff0c;购物已经变得更加便捷&#xff0c;而且我们有更多的机会通过智能工具来节省开支并赚取一些额外的钱。微信查券小助手&#xff0c;或称淘宝客公众号查券返利机器人&#xff0c;是一…

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

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

使用kettle做数据抽取流程

Kettle 是一个功能强大的 ETL 工具&#xff0c;用于实现数据的抽取、转换和加载。下面是使用 Kettle 进行数据抽取的基本流程&#xff1a; 1.准备数据源 首先&#xff0c;需要为 Kettle 配置数据源。数据源可以是数据库、文件系统或其他数据存储方式。在 Kettle 主界面的左侧&…

【师兄啊师兄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 查…

Android - AsyncTask

一、概念 是一个抽象泛型类&#xff0c;由 Android 封装的一个轻量级异步类&#xff0c;它可以在线程池中执行后台任务&#xff0c;然后把执行的进度和最终结果传递给主线程并在主线程中更新UI。 内部封装了两个线程池&#xff08;SerialExecutor、THREAD_POOL_EXECUTOR&#x…

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;不费心运营啥的。缺点是比较不自由&…

nginx配置netty

一、安装支持stream的nginx版本&#xff1a; 1、首先&#xff0c;先下载nginx的rpm包&#xff0c;下载地址&#xff1a;http://nginx.org/packages/centos/7/x86_64/RPMS/ 下载 nginx-1.20.1-1.el7.ngx.x86_64.rpm2、执行安装命令&#xff1a; 然后&#xff0c;将下载好的rp…

opencv读取摄像头并读取时间戳

下面这行代码是获取摄像头每帧的时间戳&#xff1a; double timestamp cap.get(cv::CAP_PROP_POS_MSEC); 改变帧率的方法是&#xff1a; cap.set(cv::CAP_PROP_FPS, 30); //帧率改为30 但是实际测试时发现帧率并未被改变&#xff0c;这个可能和VideoCapture cap(cv::CAP_V…

clustershell

https://clustershell.readthedocs.io/en/latest/tools/index.html clush nodeset clustershell安装 yum --enablerepoextras install epel-release yum install clustershell python2-clustershellClusterShell的Python 3子软件包(非必须) yum install python34-clustersh…

Flink 中kafka broker缩容导致Task一直重启

背景 Flink版本 1.12.2 Kafka 客户端 2.4.1 在公司的Flink平台运行了一个读Kafka计算DAU的流程序&#xff0c;由于公司Kafka的缩容&#xff0c;直接导致了该程序一直在重启&#xff0c;重启了一个小时都还没恢复&#xff08;具体的所容操作是下掉了四台kafka broker&#xff0…

LuatOS-SOC接口文档(air780E)-- ftp - ftp 客户端

ftp.login(adapter,ip_addr,port,username,password)# FTP客户端 参数 传入值类型 解释 int 适配器序号, 只能是socket.ETH0, socket.STA, socket.AP,如果不填,会选择平台自带的方式,然后是最后一个注册的适配器 string ip_addr 地址 string port 端口,默认21 string…

工作杂记-YUV的dump和read

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

MySQL索引事务

一、索引 使用一定的数据结构&#xff0c;来保存索引字段对应的数据&#xff0c;以后根据索引字段来检索&#xff0c;就可以提高检索效率。 一定的数据结构-->需要一定的空间来保存 建立索引&#xff1a;类似于建立书籍目录或者手机电话簿 使用索引&#xff1a;查询条件…