小程序多个标签点击高亮和取值

小程序多个标签点击高亮和取值,第1张

标签数据在data中定义, 因为还要点击高亮, 所以同时给个状态值

页面循环渲染出来

点击事件bindtap='select',

绑定class: class="{{item.isSelect?'active':'select'}}", 点击的时候改变类名

自定义dataset :data-index="{{index}}"

样式效果

JS部份

到这儿, 高亮的就已经写好了. 怎么取值呢? 下面还有一个保存按钮. 给保存按钮一个点击事件:

1.定义一个空数据

2.遍历上边的data里的selectall数好闭组亩袜郑, 传两个参数, v是所有标签的状态(比如isSelect:false或isSelect:true), i是下迅颂标.

看打印结果

写小程序时候,经常遇到使用下拉框选项,不过每次都手写很麻烦,所有我就发一个例子吧,因为我包在其他模块中,所有样式不知道有没有复制全,大家见谅!

·

每一个值的高度等你们可以随意设置,看个人喜好。

这个原理很简单,首先准备一些标签,准备一张图片(展开与折叠用),数据绑定就不说了。

设置变量:selectShow, 控制下拉框列表是否显示隐藏,我设置的是高度,显示就设置高度,不显示就设置为0; index,设置显示第几个数据,默认可以设置为0,根据需求; selectData,你要选择的数据组[];

当点击三角时候,设置下拉框option选项显示(高度)。当点击选项值的时卜竖则候,设置全局变量的下标值,标签中会根据下标在数组中选中,绑定数据显示, 然后设置下拉框option选项不显示(高度0)。

option总高度设置,根据你有多少选项以及selectShow值是否显示,我设置的是小于5个时候默认高度325rpx,超过五个时候,选项组length 每一个50rpx,

height:{{selectShow?(selectData.length>5?325:selectData.length 50):0}}rpx

这个是写的一个样式,我的图片是倒三角,当展开时候型棚,添加一个样式,rotate180度。

class='select_img {{selectShow&&"select_img_rotate"}}' src='../../images/b2.png'

这个是我的选项内容是一组数组,所有我循环出来,顺便绑定一个数纤雀据到标签中data-index,也就是这个值在数组中的下标,点击时候获取方便用。然后添加一个事件catchtap='optionTap'。

wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'

wxss样式:

不解释,,看设计需求写样式。不过大多通用。

写程序时候,很多地方会用到时间选项,送大家一个函数。获取一天时间分割数组。["00:00","00:05","00:10"....]参数minute ,设置隔几分钟分割。时间格式你们可以自己改。

在缓漏一些场景中,我们需要获取到标签里面的塌裤值团哪简来和接口返回的值做对比,一致则进行下一步,后者进行错误判断

<block wx:for='{{objectArray}}'  data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'>

        <text class='yuzhong'>{{item.name}}</text>

    </view>

主要在于 data- 这个上面  上面的那个name 和 id 是我自己定义的,你们可以随意定义一些语义化的词,

获取也很简单:

select:function(e){

console.log(e.currentTarget.dataset.name)

    },


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/8198803.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-14
下一篇 2023-04-14

发表评论

登录后才能评论

评论列表(0条)

保存