微信小程序下拉框样式怎么开发?

时间：2023-07-01 14:05 阅读数：122 人阅读分类：知识百科

　　微信小程序下拉框样式怎么开发?有许多的微信小程序开发者想知道怎么开发微信小程序下拉框样式，接下来小编会为大家介绍怎么开发微信小程序下拉框样式哦。跟着小编往下看看吧。

　　微信小程序下拉框样式怎么开发?

　　WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

　　WeUI最初是为HTML5的微信小程序页面设计的样式库，现在微信小程序使用的样式机制也是css风格的样式机制(不过稍稍有些不一样的地方)，WeUI理所当然的推出了WXSS版本。

　　我们可以直接去Github上下载它的代码，也可以通过npm来方便的获取：npm install weui-wxss

　　下载下来的代码中，包含了weui的源代码，以及一个基于weui的小程序示例：

　　里面包含了丰富的使用weui的示例代码，可以很好的学习weui提供的各个样式的使用。

　　你的小程序主要是通过在你的app.wxss中导入weui.wxss来导入WeUI的样式的。

　　微信小程序下拉框样式开发所需要的微信小程序代码如下：

　　/**DropDownMenu**/

　　/*总菜单容器*/

　　.menu { display: block; height: 28px; position: relative; }

　　/*一级菜单*/

　　.menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; text-align: center; background-color: #f4f4f4; color: #5a5a5a; line-height: 38px; z-index: 2; }

　　/*二级菜单外部容器样式*/

　　.menu dd { position: absolute; width: 100%; margin-top: 40px; left: 0; z-index: -99; }

　　/*二级菜单普通样式*/

　　.menu li { font-size: 14px; line-height: 34px; color: #575757; height: 34px; display: block; padding-left: 8px; background-color: #fff; border-bottom: 1px solid #dbdbdb; }

　　/*二级菜单高亮样式*/

　　.menu li.highlight { background-color: #f4f4f4; color: #48c23d; }

　　/* 显示与隐藏 */

　　.show { /*display: block;*/ visibility: visible; }

　　.hidden { /*display: none;*/ visibility: hidden; }

　　//定义字段 var initSubMenuDisplay = [] var initSubMenuHighLight = [] var initAnimationData = [

　　/// 初始化DropDownMenu loadDropDownMenu()

　　that.setData({ reportData: ReportDataSync,//菜单数据 subMenuDisplay: initSubMenuDisplay, //一级 subMenuHighLight: initSubMenuHighLight, //二级 animationData: initAnimationData //动画 })

　　以上就是微信小程序下拉框样式怎么开发的内容了，一个好看的微信小程序下拉框样式可以给您的微信小程序加分不少哦，您可以通过关注微小乔来获取更多的相关内容哦。感谢你的关注。