微信小程序下拉选择器(反UI的产品设计)

最新推荐文章于 2024-05-28 01:43:14 发布
最新推荐文章于 2024-05-28 01:43:14 发布
阅读量506 收藏
点赞数
文章标签： 产品设计 小程序 编程语言 python java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/great_1996/article/details/110257108
版权

产品居然在小程序中使用了 web 的下拉框设计...行吧,简直就是反交互。行吧，谁让产品是大哥呢。

网上搜了一圈发现使用下拉框的并不多，但也是有，找了个类似的，改造成组件。

github地址: https://github.com/hukuangjie/weapp_drop_down_selector

结果这个最基础的组件写出来之后,这个涉及到这个下拉框的需求已经被我一波讨论之后砍了。amazing....

听胡说
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序下拉筛选菜单WXDropDownMenu组件
03-29
先来看下效果图： (此图片来源于网络，如有侵权，请联系删除! ) 思路与步骤： 布局方面，整体使用dl来写，二级包在dd中，用ul li来写；交互方面，点击某一级菜单，关闭兄弟子菜单，点击某子菜单关闭所有菜单。 1.使用dt做出第一级菜单 2.使用dd嵌套第二级菜单，初始隐藏、position为absolute，使用z-index浮出页面层 /*总菜单容器*/ .menu {      display: block;     height: 38px; }   /*一级菜单*/ .menu dt {     font-size: 15px;     float: left;     /*hac
微信小程序下拉选择
花无名
07-16 6523
微信小程序下拉框选择，弹出浮层选择，下拉选择
微信小程序封装vant 下拉框select 多选组件_微信小程序下拉框
最新发布
2401_85124866的博客
05-28 364
本组件主要由小程序vant ui组件，
微信小程序--下拉选择框组件封装,可CV直接使用
m0_74444744的博客
10-12 4451
微信小程序--下拉选择框组件封装,可CV直接使用
微信小程序实现下拉筛选
shi450561200的博客
05-07 3823
【代码】微信小程序实现下拉筛选。
微信小程序筛选框
qq_57985179的博客
10-25 3042
不废话，直接上代码 wxml： <!-- 筛选和排序框 --> <view class="sreenBigBox"> <view class="sreenBox"> <view class="sreenItems"> <view class='sreen ' bindtap="sreenShow">筛选<image class='head {{sreenShow&&"rotating"}}' sr
微信小程序picker选择器（下拉框）以及传值问题
前端视听
07-02 4389
参考文档： https://developers.weixin.qq.com/miniprogram/dev/component/picker.html wxml <view class="section"> <view class="section__title">普通选择器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> &l
微信小程序自定义多项内容的下拉选项框——2023.06.08
weixin_44977914的博客
06-08 3369
【代码】微信小程序自定义多项内容的下拉选项框——2023.06.08。
小程序下拉选框
qq_51389137的博客
12-11 1066
小程序下拉框
微信小程序封装vant 下拉框select 单选组件
IT博客技术分享
01-03 3913
微信小程序封装vant 下拉框select 单选组件。
微信小程序封装vant 下拉框select 多选组件
IT博客技术分享
01-03 5420
微信小程序封装vant 下拉框select 多选组件
小程序——下拉选择框组件
热门推荐
m0_56070223的博客
10-23 2万+
微信小程序一些ui框架中没有下拉选择框组件。在网上找到的下拉框案例基础上修改。得到一个可复用，可自定义的下拉选择组件。
微信小程序下拉选择器-普通选择器picker
weixin_52869172的博客
11-05 2655
微信小程序下拉选择器-普通选择器picker .wxml <view class="pick"> <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="bindPickerChange"> <view>{{array[index]}}</view> </picker> </view> .js
微信小程序 列表多选 下拉分页 滑动切换分类
tly_74125的博客
05-26 3947
卡片列表、分页、分类、滑动可切换分类、列表搜索、多选（实现微信聊天多选效果）、回写数据
微信小程序 下拉选择
有勇气的牛排博客
04-06 1352
<view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{selectData[index]}}</text> <image class='select_img {{show&&"select_img_rotate"}}' src='/image/gobottom.png'>&l
微信小程序原生开发功能合集二：下拉选择组件封装
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
02-07 2030
本节实现select组件的开发说明，另使用nodejs创建express服务器，为远程加载数据提供数据接口，代码可从源码中下载。
关于uniapp 小程序的下拉框搜索选择
weixin_47062100的博客
09-26 4121
select选择框 搜索选择和单纯的选择
微信小程序 —— picker 组件， 下拉列表组件
u010669626的博客
02-27 1712
range-key string 当 range 是一个 object array 时， 通过 range-key。value number 0 表示选择了 range 中的第几个（下标从 0 开始)此处只列举 mode = selector 时，selector 是默认属性，不需要设置。除了通用属性，对于不同的 mode, picker 拥有不同的属性。上面的 weui.wxss 是微信官方提供的 UI 库。用这种格式加到项目里。
微信小程序下拉筛选菜单
Kayla_的博客
07-29 7053
微信小程序下拉筛选菜单 最近在做一个社交商城的微信小程序项目，碰到下拉筛选菜单，按自己的想法写了一个，写的不好忘各位大佬指教，哈哈~ ps:因为后端还没有数据所以筛选功能还没做，但是基本功能实现后做筛选也很简单啦~ wxml: <view wx:if="{{!searchResult}}"> <view class='screen'> <view clas...
微信小程序 下拉选择器
05-30
微信小程序中可以使用 `<picker>` 组件来实现下拉选择器，示例如下： ``` <view class="container"> <picker mode="selector" range="{{array}}" bindchange="bindPickerChange"> <view class="picker"> 当前选择：{{array[index]}} </view> </picker> </view> ``` 其中，`mode="selector"` 表示使用选择器模式，`range="{{array}}"` 表示选择器的数据源，`bindchange="bindPickerChange"` 表示选择器的值改变时触发的事件。具体实现可以参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值