问答

小程序二维数组index未定义?

作者:admin 2021-04-22 我要评论

.swiper-tab { width: 100%; height: 66rpx; text-align: center; background-color: white; border-bottom: 1px solid #F3F3F7; box-sizing: border-box;}.swip...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
.swiper-tab {
  width: 100%;
  height: 66rpx;
  text-align: center;
  background-color: white;
  border-bottom: 1px solid #F3F3F7;
  box-sizing: border-box;
}
.swiper-tab-list {
  font-size: 24rpx;
  display: inline-block;
  width: 25%;
  height: 100%;
  color: #212121;
  line-height: 66rpx;
}
.bill-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 15rpx;
  background: #ff928c;
  border-radius: 999px;
}

.app_topicker {
  width: 190rpx;
}

.app_topicker text {
  min-width: 160rpx;
  text-align: right;
}

/* 下拉切换中的切换 */

.nav {
  width: 20%;
  height: 100rpx;
  float: left;
  flex-direction: row;
}

.default {
  width: 100%;
  line-height: 100rpx;
  text-align: center;
  color: #000;
  font-weight: bold;
  font-size: 28rpx;
  overflow: hidden;
}

.red {
  width: 100%;
  float: right;
  line-height: 100rpx;
  text-align: center;
  color: #f63;
  font-weight: bold;
  font-size: 28rpx;
}

.show {
  display: block;
  text-align: center;
  line-height: 200rpx;
}

.hidden {
  display: none;
  text-align: center;
  line-height: 200px;
}

#rights {
  width: 79%;
  float: right;
  border-left: solid 1px #eee;
  font-size: 15px;
  max-height: 600rpx;
  overflow-y: auto;
  overflow-x: hidden;
}

/*  */
.categroy-left {
  float: left;
  width: 300rpx;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  background: #f8f8f8;
}

.categroy-left .cate-list {
  position: relative;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  text-align: center;
  border-left: 3px solid #fff;
}

.categroy-left .cate-list.on {
  color: #FF6B62;
  border-color: #FF6B62;
  background: #fff;
}

.categroy-right {
  float: right;
  width: 450rpx;
  height: 100%;
  overflow-y: auto;
  background: #fff;
}

.cate-box {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.cate-box view {
  width: 100%;
  height: 70rpx;
  padding: 0 30rpx 0 60rpx;
  font-size: 28rpx;
  line-height: 70rpx;
  border-bottom: 1rpx solid #f3f3f7;
  box-sizing: border-box;
}

.cate-box view.on {
  border-bottom: 1rpx solid #FF6B62;
}
<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="tabNav">{{twoTitle}}
    <i></i>
  </view>
</view>
<swiper current="{{currentTab}}" duration="600" class="swiper-item" style='display:{{displays}}'>
  <swiper-item>
    <view class="categroy-left">
      <view wx:for="{{category}}" wx:key="index" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchTab"
        class="cate-list {{curIndex === index?'on':''}}">{{item.title}}</view>
    </view>
    <scroll-view class="categroy-right" scroll-y="{{isScroll}}" scroll-into-view="{{toView}}"
      scroll-with-animation="true">
      <block wx:for="{{filterTwo}}" wx:for-index="idx">
        <view id="{{item.id}}" class="cate-box">
          <view class="{{curIndex === index?'on':''}}" bindtap="filterTwo" wx:for="{{item.list}}">{{item}}</view>
        </view>
      </block>
    </scroll-view>
  </swiper-item>
</swiper>
Page({

  /**
   * 页面的初始数据
   */
  data: {
    twoTitle: '账单项目',
    category: [{
        id: 'a',
        title: '全部'
      }, {
        id: 'b',
        title: '租金'
      },
      {
        id: 'f',
        title: '维修费用'
      },
      {
        id: 'j',
        title: '违约赔偿'
      },
      {
        id: 'k',
        title: '租赁费用'
      },
      {
        id: 'l',
        title: '其他类'
      },
    ],
    filterTwo: [{
      id: 'a',
      list: ['全部项目']
    }, {
      id: 'b',
      list: ['全部租金', '租金补差', '租金涨价', '房租手动添加']
    }, {
      id: 'f',
      list: ['全部维修费', '家电维修', '房屋维修']
    }, {
      id: 'j',
      list: ['全部违约赔偿', '赔偿金', '违约金']
    }, {
      id: 'k',
      list: ['全部租赁费用', '家具租赁费', '电器租赁费']
    }, {
      id: 'l',
      list: ['全部其他类', '杂项', '水费押金']
    }],
    curIndex: 0,
    toView: '',
  },
  switchTab(e) {
    const that = this;
    this.setData({
      isScroll: true
    })
    setTimeout(function () {
      that.setData({
        toView: e.target.dataset.id,
        curIndex: e.target.dataset.index
      })
    }, 0)
    setTimeout(function () {
      that.setData({
        isScroll: false
      })
    }, 1)
  },
  filterTwo: function (e) {
    let index = e.currentTarget.dataset.index;
    console.log(index)
    this.setData({
      twoTitle: index
    })
    this.setData({
      curIndex: e.target.dataset.num
    })
  },
  })

image.png

请大佬帮忙看下,点击右侧的某个项目,获取项目值,顶部“账单项目”标题就替换点击的项目内容,现在index显示undefined

###

因为你 index 就是没定义啊……

image.png

你这不是都改名成叫 idx 了嘛?

###

你没在view上绑定data-index属性,获取dataset.index可不就是undefined

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 小程序二维数组index未定义?

    小程序二维数组index未定义?

  • yii2 session 存储在数据库中,如何强

    yii2 session 存储在数据库中,如何强

  • div 设置 draggable="true" 后 mouse

    div 设置 draggable="true" 后 mouse

  • 关于 Less 中调用 Each 的异常

    关于 Less 中调用 Each 的异常

腾讯云代理商
海外云服务器