微信小程序细碎知识点(二) 关于通过index获取循环列表的某个元素

动态获取循环列表中的某个项可以通过index索引找到
代码如下:

.wxml:

:for="{
     {
     tabnav.tabitem}}" 
	 wx:key="id"
	 bindtap="setTab"
	 data-index="{
     {
     index}}"  
	 style="background:{
     {
     item.background}};{
     {
     index>4?'border-bottom:  1rpx dotted #ddd':''}}">{
     {item.text}}
>

.js:

Page({
     
  data:{
     
    tabnav: {
     
      tabnum: 4,//可显示的选项卡数量
      tabitem:[
       {
     
          "id": 0,
          "text": "首页",
          "background":"rgba(255, 255, 255, 0.75)"
        },
        {
     
          "id": 1,
          "text": "聊天室",
          "background":"#d1fff5"
        },
        {
     
          "id": 2,
          "text": "书籍",
          "background":"#d1fff5"
        }
      ]
    }
   },
  setTab: function (e) {
     
   //获取当前点击的下标
    var Index=e.currentTarget.dataset.index
  }
   
}

总结:
1.data-index="{ {index}}" 经常用于获取列表中点击元素的下标来找到当前点击的具体的列表元素
2.若想要给实践处理函数指定参数:只能通过dataset方式:在事件中添加属性(格式:data-×××:),在事件处理函数中通过e获取e.currentTarget.dataset/e.target.dataset 拿到元素的data属性
3.dataset指的是元素上所有以data开头的属性集合,所以在wxml中给标签添加属性时属性名前一定要加data

你可能感兴趣的:(微信小程序,小程序,css,html5)