微信小程序下拉选择

news2024/11/22 16:05:32

微信小程序中下拉框选择一般的交互方式有以下两种

  1. 直接下拉选择
  2. 点击选择框后,弹出浮层进行选择

下边分别介绍两种方式的实现。在微信小程序中,这两种实现都需要修改三个文件

js 文件:下拉选择逻辑的具体实现
wxml 文件:下拉组件引入、定义
wxss 文件:下拉框样式设计

直接下拉选择

在 wxml 中定义所有选择项

使用这种方式需要为每一项都绑定点击事件
wxml内容如下。
其中 bindShowMsg 处理的是选择之后需要显示的内容;
class:select_box 为所有可选择项,每一个选择项上绑定的点击事件mySelect 来处理选择某一项之后的逻辑。

<view class='list-msg'>
  下拉框
  <view class='list-msg2' bindtap='bindShowMsg'>
    <text>{{tihuoWay}}</text>
  </view>
  下拉需要显示的列表
  <view class="select_box" wx:if="{{select}}">
    <view class="select_one" bindtap="mySelect" data-name="重庆分店">重庆分店</view>
    <view class="select_one" bindtap="mySelect" data-name="东莞南城分店">东莞南城分店</view>
    <view class="select_one" bindtap="mySelect" data-name="东莞总店">东莞总店</view>
  </view>
</view>

在 wxss 中进行样式定义

.list-msg {
  padding: 0 20rpx;
  background-color: #fff;
  position: relative;
}

.list-msg1 {
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list-msg .list-msg2 {
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ccc;
  padding: 0 10rpx;
}

.select_box {
  background-color: #eee;
  padding: 0 10rpx;
  width: 93%;
  position: absolute;
  top: 130rpx;
  z-index: 1;
  overflow: hidden;
  animation: myfirst 0.5s;
}
.select_one {
  height: 60rpx;
  line-height: 60rpx;
  border-bottom: 1px solid #ccc;
}

js 中进行事件处理,为了节省篇幅,下边这个 js 内容,把默认的方法都去掉了。
js 文件中
首先需要在 data 中定义 tihuoWay:页面上显示的内容由这个字段决定
select:控制下拉列表要不要展示,select 字段和点击事件进行 bindShowMsg 绑定,当触发点击时,select 值为 false,显示下拉框。

下拉框中的每一项和 mySelect 绑定,点击选项的时候对 tihuoWay,select 字段设置值,点击完成选择项就可以展示在页面上

Page({
  /**
   * 页面的初始数据
   */
  data: {
    tihuoWay: "门店自提",
    select: false,
  },

  swiperChange: function (e) {
    // console.log(e)
    if (e) {
      let current = e.detail.current;
      let source = e.detail.source;
      if (source === "touch") {
        this.setData({
          index: current,
        });
      }
    }
    // console.log(this.data.index)
  },
  bindShowMsg() {
    this.setData({
      select: !this.data.select,
    });
  },
  mySelect(e) {
    var name = e.currentTarget.dataset.name;
    this.setData({
      tihuoWay: name,
      select: false,
    });
  },
});

效果图如下:
wxml中定义下拉项

在js文件中定义下拉项

数据项的定义除了在 wxml 中写死,也可以在 js 文件中定义,如果在 js 文件中定义数据,在 wxml 中就需要进行数据遍历,实现方法略有不同。在js中定义数据更为灵活,可支持动态数据展示。

在选择的内容展示部分和上边是一样的,只在下拉框展示有所不同。下拉框中使用
wx:for 指定要遍历的数据
data_arr 在 js 的 data 中定义好,wxml 中使用 data_arr 时,通过"{{}}"方式获取对应的数据,

<view class='list-msg'>
  下拉框
  <view class='list-msg2' bindtap='bindShowMsg_js_data'>
    <text>{{show_data_from_js}}</text>
  </view>
  下拉需要显示的列表
  <view class="select_box" wx:if="{{select_from_js}}">
    <view wx:for="{{data_arr}}" wx:key="unique">
        <view class="select_one" bindtap="select_js_data" data-name="{{item}}">{{item}}</view>
    </view>
  </view>
</view>

js 中增加绑定方法的实现

bindShowMsg_js_data() {
    this.setData({
      select_from_js: !this.data.select_from_js
    })
  },

  select_js_data(e) {
    var name = e.currentTarget.dataset.name
    console.log(name)
    this.setData({
      show_data_from_js: name,
      select_from_js: false
    })
  },

效果图如下
data中定义数据

弹出浮层选择框

有时候为了交互更友好,页面布局清晰,会把下拉框的选择放到浮层中,内容更清晰明了。对于这种情况,微信小程序提供了picker组件,
在官方文档中,有提供五种类型的picker组件,如普通选择器,多列选择器,时间选择器,日期选择器和省市区选择器。在使用时只需指定mode就可以记性类型选择。

<picker mode="multiSelector">

如果不需要使用默认的类型,也可不指定mode,此处给出的是不指定mode使用。
picker模块中,bindchange是绑定的点击事件
value是页面点击选择项时获取到的数据索引
range为需要遍历的数据

<view class="boder">
  <text>弹出浮层</text>
</view>
<view class="list-msg">
  <view class="select_title_view">
    <view>下拉框</view>
  </view>
  <view class="select_page_view">
    <picker class="list-msg2" bindchange="select_pop_data" value="{{type_index}}" range="{{type_desc_arr}}">
      <view class="picker">
        {{type_desc}}
      </view>
    </picker>
  </view>
</view>

如上的xml中,用的数据包括value中的{{type_index}}、range中的{{type_desc_arr}}、以及最终要展示的{{type_desc}}
注意:所有在js中定的数据,如果需要在xml中使用,都需要通过{{}}进行引用
针对上边用到的数据和绑定事件在js中进行定义

data: {
    type_index:0,
    type_desc_arr: ["年","月","日"],
    type_name_arr: ["year","month","day"],
    type_desc: "default 月"
  },

select_pop_data(e) {
    let _this = this
    let type_name = _this.data.type_name_arr[e.detail.value]
    let type_desc = _this.data.type_desc_arr[e.detail.value]
    _this.setData({
      type_name: type_name,
      type_index: e.detail.value,
      type_desc: type_desc
    });
    _this.refresh_chart();
  },

展示效果如下
弹出浮层展示
此处只给出了两种基本的下拉弹窗,且数据格式也不复杂,对于复杂情况,只需要根据数据场景修改一般也能满足。

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

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

相关文章

C#正则表达式校验某个字符串是否是合格的email

C#正则表达式校验某个字符串是否是合格的email 可以借助正则表达式校验某个字符串是否是合规的电子邮箱。对于邮箱的正则表达式有严格的模式&#xff0c;如&#xff1a;^[a-zA-Z0-9_&*-](?:\\.[a-zA-Z0-9_&*-])*(?:[a-zA-Z0-9-]\\.)[a-zA-Z]{2,7}$ 对应的C#实现如下…

TCP编程流程和粘包

目录 1、TCP编程流程 2、粘包 1、TCP编程流程 socket() 是创建套接字&#xff0c;返回值为监听套接字描述符&#xff0c;有了套接字才能通过网络进行数据的传输。创建套接字的参数要指定服务类型&#xff0c;TCP协议使用的是流式服务&#xff08;SOCK_STREAM&#xff09;。 b…

用Matlab听音乐 - 动态频谱

文章目录 高帧率版本效果: 定时器版本music_play主函数&#xff1a;定时器回调函数&#xff1a;效果: 高帧率版本 由于matlab这款科学计算软件本身庞大略显笨重&#xff0c;执行代码的速度受当前系统影响&#xff0c;很难做到严格定时仿真&#xff08;造成音画不同步&#xff…

互联网行业真的不行了吗?

文章目录 前言一、起因二、互联网真的完了吗&#xff1f;三、是不是要转行&#xff1f;四、十年磨一剑五、统一回复 前言 英雄算法联盟 - 七月集训 已经开始 16 天&#xff0c;八月算法集训 将于 08月01日 正式开始&#xff0c;目前已经提前开始报名&#xff0c;报名方式参见&a…

英国24所顶尖大学撤销禁令,更新AI使用规定!

自从ChatGPT展现了其高超的AI技术后&#xff0c;备受全球年轻人的喜爱。ChatGPT功能多样化&#xff0c;可以节省查阅复杂文献的时间、编写简单的Python代码、辅助学生理解知识点... 同时&#xff0c;ChatGPT引发的学术不诚信问题也让各大院校头疼不已。 连续数月以来&#xff…

js 浮点位数超过17位乘以10^18,精度丢失问题

我有一个浮点型 var num 9.963407954080194743 用num * (10 ** 18) 计算得出的结果是9963407954080195000, 但是我想要得到的结果是9963407954080194743 问ChatGPT问题得以解决&#xff1a; GPT提供的代码&#xff1a; import Big from big.js;const num1 new Big(9.9634…

从输入URL到页面渲染的整个过程

从输入URL到页面渲染的整个过程 1.DNS解析&#xff0c;把url中的域名解析成对应的IP地址。如果本地DNS缓存没有响应的记录&#xff0c;则会向DNS发送请求&#xff0c;获取相应的IP地址。 2.浏览器使用获取到的目标服务器的IP地址&#xff0c;通过TCP/IP协议与服务器建立连接&a…

python-web开发(Djaongo)课程基本内容

python-web开发&#xff08;Djaongo&#xff09;课程基本内容及其前置技术 参考内容&#xff1a; 【最新Python的web开发全家桶&#xff08;django前端数据库&#xff09;】 https://www.bilibili.com/video/BV1rT4y1v7uQ/?share_sourcecopy_web&vd_source84fd4883bb478d0…

CDA数据分析系01 anaconda

简介 数据处理集成包&#xff0c;不局限于python 创建一个新的environment conda create --name python34 python3.4 激活一个environment activate python34 # for windows conda的package管理 类似pip&#xff0c;conda install xxxx 查看已安装的python包 conda list…

利用技术优势:程序员如何通过互联网自媒体项目实现财务自由?

作为程序员&#xff0c;通过互联网自媒体项目实现财务自由是一个很好的选择。以下是一些技术优势的利用方法&#xff1a; 选择适合的自媒体平台&#xff1a;在互联网上有许多不同类型的自媒体平台&#xff0c;如博客、YouTube、Podcast等。选择适合你技术背景和兴趣的平台&…

手机忘记密码怎么办? 帮你快速解锁手机的十大软件请收好

有许多不同类型的手机锁&#xff0c;这些锁对于手机的用户或所有者来说可能非常烦人和恼人。这些锁可称为手机锁、SIM 锁、主锁或运营商锁。这些锁实际上是手机的实际限制。 为了仅在有限的国家/地区阻止电话访问&#xff0c;该区域之外的任何其他人都无法使用。 手机解锁如何…

极速上手k8s,Kubernetes 从入门到摸鱼系列-实践篇

大家好&#xff0c;我是比特桃。本文为《极速上手k8s&#xff0c;Kubernetes 从入门到摸鱼系列》的实战篇&#xff0c;旨在快速上手k8s。如没有阅读过k8s相关理论的朋友&#xff0c;可以先阅读理论篇。 1. 实践环境 k8s 的意义在于分布式大规模容器编排&#xff0c;所以如果我…

第一百零八天学习记录:C++基础:文件操作

C中对文件操作需要包含头文件<fstream> 操作文件的三大类&#xff1a; 1、ofstream:写擦破自评 2、ifstream:读操作 3、fstream:读写操作 文本文件 写文件 写文件步骤如下&#xff1a; 1、包含头文件 #include <fstream>2、创建流对象 ofstream ofs; 3、打开文…

Vue2笔记

Vue2 前端 语雀 (yuque.com) vue3: https://github.com/Panyue-genkiyo/vue3-learning vue2依据脚手架:https://github.com/Panyue-genkiyo/vue-advance vue基础不依赖脚手架:https://github.com/Panyue-genkiyo/vue-learning Vue 是一套用于构建用户界面的 渐进式框框架…

B2B2C多用户商城软件功能清单

多用户B2B2C是如今企业搭建电商平台比较火热模式&#xff0c;B2B2C包含了B2B与B2C这两者模式的特点&#xff0c;是非常具有发展前景的商城系统&#xff0c;那么一个完善的多用户B2B2C商城系统应该包含哪些主要功能呢?加速度jsudo一起来看看吧! 商品模块功能&#xff1a; 包括…

【深度剖析】 堆排序为什么不稳定?!

文章目录 零、前言一、什么是稳定性&#xff1f;二、不稳定的地方在哪里&#xff1f; 零、前言 最近做面试题中&#xff0c;遇到一些平时学习中比较少注意到的问题&#xff0c;记录下来以便后来者学习讨论。 对 堆排序 不熟悉的 可以参考 &#x1f449;&#x1f449;&#x1f4…

TortoiseGit 入门指南07:创建分支

Git 的 分支 出了名的好用。其它的版本控制系统也提供分支&#xff0c;但在易用度上&#xff0c;只有两类版本控制系统&#xff1a;一种是 Git&#xff0c;一种是其它。 Bob 大叔在《匠艺整洁之道》中写道&#xff1a; 我曾经坚持拒绝分支。在使用 CVS 和 Subversion 的时候&a…

检测到目标X-Content-Type-Options响应头缺失

详细描述 X-Content-Type-Options HTTP 消息头相当于一个提示标志&#xff0c;被服务器用来提示客户端一定要遵循在 Content-Type 首部中对 MIME 类型 的设定&#xff0c;而不能对其进行修改。这就禁用了客户端的 MIME 类型嗅探行为&#xff0c;换句话说&#xff0c;也就是意味…

Dynamic-SLAM2019论文翻译

Dynamic-SLAM:动态环境下基于深度学习的语义单目视觉定位与建图 摘要-传统SLAM框架在动态环境下工作时&#xff0c;由于受到动态对象的干扰&#xff0c;性能较差。为了解决动态环境下的SLAM问题&#xff0c;利用深度学习在目标检测中的优势&#xff0c;提出了一种语义同步定位…

Science Advances|上海交大王风平团队揭示深古菌与早期地球协同演化历史

Research Article&#xff0c;2023-7-5&#xff0c;Science Advances&#xff0c; [IF 13.6] 原文链接&#xff1a;https://www.science.org/doi/full/10.1126/sciadv.adf5069 第一作者&#xff1a;侯佳林 通讯作者&#xff1a;王风平&#xff0c;王寅炤 - 摘要 - 近日&#xf…