liuye066的专栏

一组按钮，分成两页，使用swiper展示index.hml调用： <swiper class="swiper" id="swiper" index="0" indicator="true" loop="false" digital="false" on:change="changeSwiper"> <div class = "swiperContent" for="{{autoModeSwipe

需求：制作设备的控制页面，设备有很多型号，功能可能有所不同。根据型号的typeid从配置文件中获取功能列表。配置文件：deviceConfig.jsconst defaultConfig = { typeid: "", autoModeArr: [ { name: "大师智选", label: "autoMode", value: "1", icon: "/common/

效果图：自定义类似于下拉列表框的效果，当时考虑了几种组件，select, menu, popup,自定义组件。比较：select：优缺点：1. 右边的箭头不能自定义;2.下拉框的option也不能随便修改样式；除了能修改字体样式外，宽度高度等都不能自定义；3.下拉框的起始位置跟随select的左边沿。当select位于左边有足够空间时，option显示也比较大，但当select位于右边比较靠边的位置时，option的宽度就自动变小，左右两边的下拉框宽度不一样。popup.

自定义一个下拉列表框，当这个功能有效时，点击可弹出下拉框，选中某个选项后，在左边功能名称下面显示选项值，右边的箭头替换成自定义图标，例如手法功能；当功能无效时，置灰，如力度功能；具体示例如下：代码如下：index.hml<!--手法无效时--><div class="fun-grid-item" if="{{manualInvalid}}"> <div class="grid-item-parent-ver.