微信小程序例子——下拉列表

article/2025/10/8 6:21:30

1、效果展示

2、关键代码

.js文件

Page({
data:{
// text:"这是一个页面"
open:false
},
showitem:function(){
this.setData({
open:!this.data.open
})
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})


.wxml文件



点击我显示下拉列表
列表1列表2列表3

.wxss文件

.page_bd{
padding: 10px;
background-color: snow;
}
.body_head{
border: 1px solid;
border-color: beige;
padding: 10px;
}
.display_show{
display: block;
border: 1px solid;    
border-color: beige;
padding: 10px;
}
.display_none{
display: none;
}

3、源代码获取方式

【百度云】链接:http://pan.baidu.com/s/1c87hEm 密码:rd3g


http://chatgpt.dhexx.cn/article/uuDLT6Qw.shtml

相关文章

uni-app微信小程序——下拉多选框

插件来自&#xff1a;select-cy - DCloud 插件市场 1、组件代码 <template><view class"uni-select-cy" :style"{ z-index: zindex }"><view class"uni-select-cy-select" :class"{ active: active }" click.stop&quo…

微信小程序下拉框选择

wxml代码 <view classtop-selected bindtapbindShowMsg><text>{{grade_name}}</text> </view> <!-- 下拉需要显示的列表 --> <view class"select_box" wx:if"{{select}}"><view wx:for"{{grades}}" wx:…

微信小程序——自定义下拉框

微信小程序本身并没有自带的下拉框组件&#xff0c;我们可以通过view标签自定义一个下拉框。(仅供参考&#xff09; 目录 文件目录实现效果实现逻辑设置数据设置默认选项实现弹出下拉框提供选项值设置所选值 源码wxmlwxssjs 文件目录 文件的功能&#xff1a; xxx.js&#xff…

小程序如何实现下拉选项操作

wxml文件代码 <picker class"picker" mode"selector" bindchange"bindAccountChange" value"{{accountIndex}}" range-key"label"range"{{accounts}} "><view class"weui-select">{{accou…

小程序下拉列表框菜单

小程序下拉列表框菜单 <view classtop><view classtop-text> 选择班别</view><!-- 下拉框 --><view classtop-selected bindtapbindShowMsg><text>{{grade_name}}</text><image src/images/xia.png></image></view&…

微信小程序的简单下拉框组件

网上的下拉框组件都不是自己想要的于是就自己写了一个。 wxml 原代码上传竟然显示不出来&#xff0c;wxml只能截图了&#xff0c;然后是js部分 data: { dropdownData:[“综合排序”,”行政区”,”商业圈”],//下拉框的数组 selectData: [‘默认排序’, ‘距离我最近’, …

微信小程序组件 —— 树形下拉框

因为项目需求&#xff0c;需要一个树形下拉选择框&#xff0c;参考了网上的树形结构整理出了这样一个效果图 下载地址&#xff1a;wx_treeSelect下载 其实主要还是参考了treeview的递归思想 微信小程序实现简单的树形图treeview 绘制出下拉框内的内容&#xff0c;在加个状态判…

微信小程序 一个简单的select下拉框

微信小程序 一个简单的select下拉框 用的是transform过渡&#xff0c;没用动画 看看效果 废话不多说&#xff0c;直接上代码 wxml: <view class"item"><label class"first"><text>*</text>公司/商户类型&#xff1a;</labe…

微信小程序下拉选项框

效果图 test.js /*** 页面的初始数据*/data: {shows: false, //控制下拉列表的显示隐藏&#xff0c;false隐藏、true显示selectDatas: [消费账户, 平台返利账户, 微信钱包], //下拉列表的数据indexs: 0, //选择的下拉列 表下标,},// 点击下拉显示框selectTaps() {this.setDa…

微信小程序select下拉框实现。

小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉 这里为了更清楚的显示层级 就把源码直接复制过来了 <view classlist-msg><view classlist-msg1><text>商品金额</text><text>&#xffe5;99.00</text></view&…

微信小程序之select下拉框

wxml&#xff1a; <view class"classify-kuangjia"><view class"classify-kuangjia2"><view>商品分类:</view><!-- 下拉框 --><view classclassify bindtapbindShowMsg><text>{{grade_name}}</text><…

微信小程序原生的下拉框组件

前言 近日开发微信小程序时&#xff0c;需要一个下拉框的组件&#xff0c;使用和PC端下拉框一样的方式会显得很丑&#xff0c;于是发现微信官方API有个wx.showActionSheet&#xff0c;但是有诸多限制&#xff0c;例如&#xff1a;最大长度只能是6项&#xff0c;多选等等。 由…

微信小程序实现下拉菜单效果

问题 下拉菜单在各类网页&#xff0c;app或者小程序中都是比较常见的输入控件。下拉菜单的下拉选项的多少可以根据自身需求进行调节&#xff0c;常运用于时间范围选择&#xff0c;地点区域选择&#xff0c;价格区间选择&#xff0c;等等。提供下拉菜单的目的是帮助用户更快更准…

使用微信小程序做一个简易的下拉框,无动画效果,纯原生写法(下拉列表框)

最近在开发的时候&#xff0c;需要使用下拉的效果&#xff0c;但是之前并没有进行书写过&#xff0c;今天做一个简单的demo&#xff0c;来记录一下微信小程序开发的下拉框效果。 微信小程序和jquery最大的区别就是是否操作dom&#xff0c; 微信小程序无需操作dom&#xff0c;可…

微信小程序下拉选择

微信小程序中下拉框选择一般的交互方式有以下两种 直接下拉选择点击选择框后&#xff0c;弹出浮层进行选择 下边分别介绍两种方式的实现。在微信小程序中&#xff0c;这两种实现都需要修改三个文件 js 文件&#xff1a;下拉选择逻辑的具体实现 wxml 文件&#xff1a;下拉组件…

小程序——下拉选择框组件

一、效果 二、说明 最近在开发微信小程序&#xff0c;但是用的lin-ui和vant 都没有下拉选择框组件。在网上搜索一番后&#xff0c;发现了一个挺简单且很好用的下拉框组件。 链接在这里&#xff1a;https://blog.csdn.net/WeiflR10/article/details/121494131 原文中是直接写入…

微信小程序实现下拉框功能

微信小程序里没有和HTML里的下拉框一样的组件&#xff0c;想要相同的效果只能自己写一个&#xff0c;先看效果 下面来看一下代码&#xff1a; 首先WXML <view classselect_box><view classselect catchtapselectTap><text classselect_text>{{selectData[i…

小程序登录详解

小程序登录简单分为以下几步&#xff1a; 使用wx.login获取code值获取code值后再加 AppID appsecret code 传给后端后端调接口 拿到 seesion_key openid 返回 token前端存储token 小程序登录的三个角色 小程序 用户使用客户端 由于小程序运行在微信之上 因此小程序可以通过…

一个好看的小程序登录页面

文章目录 前言一、效果图二、实现代码 前言 写一个挺好看的小程序页面&#xff0c;发出来记录一下 一、效果图 登录页面&#xff1a; 注册页面&#xff1a; 通过点击注册和登录按钮切换两个页面淡入淡出效果 二、实现代码 wxml: <!--pages/login/login.wxml--> &…

微信小程序的简单登录

这种在前台直接获取openid的方式已经不可以用了&#xff0c;各位想了解新的登录请去http://blog.csdn.net/m0_37992327/article/details/73469087&#xff0c;不过下面的一些东西还是对大家有帮助的&#xff0c;有兴趣的可以看一下&#xff0c;尤其是ssl证书的申请方式。 最近…