小程序中封装下拉选择框

小程序中没有现成的下拉选择组件,有个picker组件,但是是底部弹出的,不满足我的需求,所以重新封装了一个。

封装的下拉组件

html部分:

<view class="select_all_view"><!-- 内容说明,可以没有 --><view class="select_title" wx:if="{{title}}">{{title}}</view><view class="select_view" style="width: {{selectWidth}};"><!-- 输入框 --><view class="inputPlaceholder" bindtap="startChange"><text class="text" wx:if='{{select}}'>{{select}}</text><text class="text placeholder_text" wx:else="{{select}}">{{placeholder}}</text><view class="drop_down" wx:if='{{changable}}'><image style="width:48rpx;height:48rpx" src="../../image/drop_up.png" mode="" /></view><view class="drop_down" wx:else='{{changable}}'><image style="width:48rpx;height:48rpx" src="../../image/drop_down2.png" mode="" /></view></view><!-- 下拉展开后的可选择内容 --><view class="content" wx:if='{{changable}}'><view class="select_item {{item.id==selectId ? 'active':''}}" wx:for="{{selectcontent}}" wx:key="idnex" bindtap="changecontent" data-datavalue="{{item}}">{{item.name}}</view></view></view>
</view>

css部分:

.select_all_view {display: flex;z-index: 999;
}.select_view {display: inline;position: relative;
}.inputPlaceholder {width: 100%;height: 64rpx;border: 2rpx solid #3A3A3A;font-size: 28rpx;line-height: 32rpx;color: #D8D4D4;border-radius: 12rpx;padding-left: 30rpx;box-sizing: border-box;position: relative;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}.select_view .inputPlaceholder .text {line-height:64rpx;
}.placeholder_text {color: #9B9B9B;font-size: 28rpx;
}.drop_down {position: absolute;right: 12rpx;top: 8rpx;
}.content {width: 100%;background: #FFFFFF;color: #505050;font-size: 30rpx;box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.38);border-radius: 16rpx;padding: 10rpx 12rpx;box-sizing: border-box;position: absolute;top: 76rpx;z-index: 999;
}.select_item {width: 100%;height: 76rpx;display: flex;justify-content: center;align-items: center;
}.select_view .content .active {background: #EDF5FF;border-radius: 4rpx;color: #1061FE;
}

js部分:

Component({properties: {selectWidth: {type: String,value: '100%'},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", { item: e.currentTarget.dataset.datavalue });//向父组件传参},//处理数据,复制一遍,因为子组件不能直接改变父组件的传进来的值。processData() {this.setData({selectcontent: this.properties.nameList,select: this.properties.nowName,selectId: this.properties.nowId,});},// 关闭下拉框closeSelect() {this.setData({changable: false});}}
})

在父组件中使用:

HTML部分:

<view class="dropdown_box"><dropdown style="margin-right: 20rpx;" class="dropdown" id="dropdown1" selectWidth="240rpx" nowId="{{firstTitleId}}" nameList="{{firstTitle}}" placeholder="请选择" nowName="{{firstTitleVal}}" bind:handleChange="changeFirstTitle"></dropdown><dropdown class="dropdown" id="dropdown2" selectWidth="240rpx" nowId="{{secondTitleId}}" nameList="{{secondTitle}}" nowName="{{secondTitleVal}}" placeholder="请选择" bind:handleChange="changeSecondTitle"></dropdown><dropdown class="dropdown" id="dropdown3" nowId="{{wordLimitId}}" nameList="{{wordLimitList}}" nowName="{{wordLimitVal}}" placeholder="请选择字数" bind:handleChange="changeWords"></dropdown>
</view>

.json文件:

{"usingComponents": {"dropdown":"../component/dropdown/dropdown"}
}

js部分:

Page({/*** 页面的初始数据*/data: {firstTitle: [{id: 1,name: '标题创作'},{id: 2,name: '社媒文案'},{id: 3,name: '故事创作'},],secondTitle: [],  //二级标题数组wordLimitList: [{id: 1,name: '不限',value: 800},{id: 2,name: '约150字≈30s',value: 150},{id: 3,name: '约300字≈60s',value: 300},{id: 4,name: '约600字≈120s',value: 600},],firstTitleVal: "社媒文案",firstTitleId: 2,secondTitleVal: "文章改写",secondTitleId: 4,wordLimitVal: "",wordLimitId: 1},/*** 生命周期函数--监听页面加载*/onLoad(options) {},// 选择一级标题changeFirstTitle(e) {let selectId = e.detail.item.id},// 选择二级标题changeSecondTitle(e) {console.log(e)},// 选择字数changeWords(e) {},//点击当前选择框时,关闭其他下拉弹出框;点击页面其他部分,关闭所有下拉弹出框handlePageTap(e) {const dropdownIds = ['dropdown1', 'dropdown2', 'dropdown3'];const clickedId = e.target.id;if (dropdownIds.includes(clickedId)) {const otherDropdownIds = dropdownIds.filter(id => id !== clickedId);otherDropdownIds.forEach(id => {const dropdown = this.selectComponent('#' + id);dropdown.closeSelect();});} else {const dropdowns = this.selectAllComponents('.dropdown');dropdowns.forEach(dropdown => {dropdown.closeSelect();});}},
})

页面效果图:
在这里插入图片描述

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

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

相关文章

中小型网络系统总体规划与设计方法

目录 1.基于网络的信息系统基本结构 2.网络需求调研与系统设计原则 3.网络用户调查 4.网络节点地理位置分布情况 5.网络需求详细分析 6.应用概要分析 7.网络工程设计总体目标与设计原则 8.网络结构与拓扑构型设计方法 9.核心层网络结构设计 10.接入核心路由器 11.汇聚…

513. 找树左下角的值 - 力扣(LeetCode)

题目描述 给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 题目示例 输入: root [2,1,3] 输出: 1 解题思路 深度优先搜索 使用 depth 记录遍历到的节点的深度&#xff0c;result 记录深度在 depth 的最…

幻兽帕鲁mac可以玩吗?

《幻兽帕鲁》&#xff08;英文&#xff1a;Palworld&#xff09;是一款近期在 Steam 爆红的动作冒险生存游戏&#xff0c;游戏设置在一个居住着「帕鲁」的开放世界中&#xff0c;玩家可以战斗并捕捉帕鲁&#xff0c;也能用它们来建造基地、骑乘和战斗。 不过目前《幻兽帕鲁》仅…

Appium使用初体验之参数配置,简单能够运行起来

一、服务器配置 Appium Server配置与Appium Server GUI&#xff08;可视化客户端&#xff09;中的配置对应&#xff0c;尤其是二者如果不在同一台机器上&#xff0c;那么就需要配置Appium Server GUI所在机器的IP&#xff08;Appium Server GUI的HOST也需要配置本机IP&#xf…

Android Studio安装过程遇到SDK无法安装问题解决

首次打开studio遇到该类问题&#xff0c;需要下载SDK文件&#xff0c;后又发现SDK由于是Google源&#xff0c;无法进行正常安装&#xff0c;故转而进行SDK的镜像安装。 一、下载SDK Tools 地址&#xff1a;AndroidDevTools - Android开发工具 Android SDK下载 Android Studio…

macbook电脑如何永久删除app软件?

在使用MacBook的过程中&#xff0c;我们经常会下载各种App来满足日常的工作和娱乐需求。然而&#xff0c;随着时间的积累&#xff0c;这些App不仅占据了宝贵的硬盘空间&#xff0c;还可能拖慢电脑的运行速度。那么&#xff0c;如何有效地管理和删除这些不再需要的App呢&#xf…

C++面试宝典第27题:完全平方数之和

题目 给定正整数 n,找到若干个完全平方数(比如:1、4、9、16、...),使得它们的和等于n。你需要让组成和的完全平方数的个数最少。 示例1: 输入:n = 12 输出:3 解释:12 = 4 + 4 + 4。 示例2: 输入:n = 13 输出:2 解释:13 = 4 + 9。 解析 这道题主要考察应聘者对于…

JVM-运行时数据区程序计数器

运行时数据区 Java虚拟机在运行Java程序过程中管理的内存区域&#xff0c;称之为运行时数据区。《Java虚拟机规范》中规定了每一部分的作用。 程序计数器的定义 程序计数器&#xff08;Program Counter Register&#xff09;也叫PC寄存器&#xff0c;每个线程会通过程序计数器…

SpringCloud-Eureka原理分析

Eureka是Netflix开源的一款用于实现服务注册与发现的工具。在微服务架构中&#xff0c;服务的动态注册和发现是必不可少的组成部分&#xff0c;而Eureka正是为了解决这一问题而诞生的。 一、为何需要Eureka 在微服务架构中&#xff0c;服务之间的协同合作和高效通信是至关重要…

网络原理TCP/IP(1)

文章目录 端口号UDP协议 在网络通信中&#xff0c;协议非常重要 协议进行了分层 应用层就是对应着应用程序&#xff0c;是程序员打交道最多的这一层&#xff0c;调用系统提供的网络api写出来的代码都是属于应用层的 应用层有很多现成的协议&#xff0c;但是更多的还是程序员需要…

Redis篇之集群

一、主从复制 1.实现主从作用 单节点Redis的并发能力是有上限的&#xff0c;要进一步提高Redis的并发能力&#xff0c;就需要搭建主从集群&#xff0c;实现读写分离。主节点用来写的操作&#xff0c;从节点用来读操作&#xff0c;并且主节点发生写操作后&#xff0c;会把数据同…

RabbitMQ详解

RabbitMQ 1.初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&a…

设计模式理解:单例模式+工厂模式+建设者模式+原型模式

迪米特法则&#xff1a;Law of Demeter, LoD, 最少知识原则LKP 如果两个软件实体无须直接通信&#xff0c;那么就不应当发生直接的相互调用&#xff0c;可以通过第三方转发该调用。其目的是降低类之间的耦合度&#xff0c;提高模块的相对独立性。 所以&#xff0c;在运用迪米特…

一文读懂转融通

最近多家公司都在讲解关于转融通要求。今天我们就来详细聊聊&#xff01; 转融通是一种证券借贷机制&#xff0c;它允许机构投资者在融资融券交易中借入或借出证券。 具体来说&#xff0c;机构投资者可以向券商借入证券&#xff0c;或者将持有的证券借给券商&#xff0c;以扩大…

诺奖经济学家称AI将取代STEM专业工作!Altman:人类无需工作,我给发钱

最近&#xff0c;2010年诺贝尔经济学奖得主&#xff0c;伦敦政治经济学院&#xff08;LSE&#xff09;教授Christopher Pissarides公开表态&#xff0c;在不远的未来&#xff0c;传统意义上的「数理化」学科知识和技能&#xff0c;都将会被AI取代。 这位劳动力市场经济学家警告…

mac检查CPU温度和风扇速度软件:Macs Fan Control Pro 1.5.17中文版

Macs Fan Control Pro for Mac是一款专业的电脑风扇控制工具&#xff0c;旨在帮助Mac用户有效控制电脑的风扇速度&#xff0c;提高电脑的运行效率和稳定性。 软件下载&#xff1a;Macs Fan Control Pro 1.5.17中文版 该软件支持多种风扇控制模式和预设方案&#xff0c;用户可以…

Vue源码系列讲解——虚拟DOM篇【一】(Vue中的虚拟DOM)

目录 1. 前言 2. 虚拟DOM简介 2.1什么是虚拟DOM&#xff1f; 2.2为什么要有虚拟DOM&#xff1f; 3. Vue中的虚拟DOM 3.1 VNode类 3.2 VNode的类型 3.2.1 注释节点 3.2.2 文本节点 3.2.3 克隆节点 3.2.4 元素节点 3.2.5 组件节点 3.2.6 函数式组件节点 3.2.7 小结 3…

使用pygame生成红包封面

import pygame import sys# 初始化pygame pygame.init()# 设置红包封面尺寸 size width, height 640, 960 screen_color (255, 0, 0) # 红色背景# 创建窗口 screen pygame.display.set_mode(size) pygame.display.set_caption(红包封面)# 加载龙形图片 dragon_image pygam…

运维自动化bingo前端

项目目录结构介绍 项目创建完成之后&#xff0c;我们会看到bingo_web项目其实是一个文件夹&#xff0c;我们进入到文件夹内部就会发现一些目录和文件&#xff0c;我们简单回顾一下里面的部分核心目录与文件。 ├─node_modules/ # node的包目录&#xff0c;项目运行的依赖包…

【C++】模板入门教程

C模板是C编程中的重要利器&#xff0c;能够大大提高编码效率。函数模板和类模板是模板编程中的两个重要概念&#xff0c;它们允许我们编写独立于数据类型的通用代码。 本文将深入介绍函数模板和类模板的使用方法&#xff0c;以及它们的实现原理、匹配规则和注意事项&#xff0…