在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 小程序用switchTab做側(cè)邊tab切換,數(shù)據(jù)取到了,但是內(nèi)容沒顯示,請(qǐng)幫忙看

小程序用switchTab做側(cè)邊tab切換,數(shù)據(jù)取到了,但是內(nèi)容沒顯示,請(qǐng)幫忙看下這是什么原因?

1.問題:小程序用switchTab做了一個(gè)側(cè)邊導(dǎo)航,數(shù)據(jù)是本地data.js做的一個(gè)暴露接口,現(xiàn)在點(diǎn)選tab能console出相應(yīng)的數(shù)據(jù),但是內(nèi)容沒顯示。代碼如下:

data.js:

function getClassData() {
  var arrays = [
    {
      id: 'erha',
      banner: '/images/erha_list_banner.jpg',
      cate: '拆家大隊(duì)長(zhǎng)',
      detail: [
        {
          thumb: '/images/erha.jpg',
          name: '二哈'
        }
      ]
    },
    {
      id: 'fanfan',
      banner: '/images/fanfan_list_banner.jpg',
      cate: '傳說中的橘貓',
      detail: [
        {
          thumb: '/images/fanfan.jpg',
          name: '飯飯'
        }
      ]
    },
    {
      id: 'pingtouge',
      banner: '/images/pingtouge_list_banner.jpg',
      cate: '最無所畏懼的動(dòng)物',
      detail: [
        {
          thumb: '/images/pingtouge.jpg',
          name: '平頭哥'
        }
      ]
    },
    {
      id: 'qijiao',
      banner: '/images/qijiao_list_banner.jpg',
      cate: '短腿柯基',
      detail: [
        {
          thumb: '/images/qijiao.jpg',
          name: '七餃'
        }
      ]
    }
  ]
  return arrays
}

module.exports = {
  getClassData : getClassData
}

class.js:

    var classData = require('../../../utils/data.js')

Page ({
  data: {
    category: [
      { name: '二哈', id: 'erha' },
      { name: '飯飯', id: 'fanfan' },
      { name: '平頭哥', id: 'pingtouge' },
      { name: '七餃', id: 'qijiao' }
    ],
    detailData: '',
    details: [
      {
        id: 'erha',
        banner: '/images/erha_list_banner.jpg',
        cate: '拆家大隊(duì)長(zhǎng)',
        detail: [
          {
            thumb: '/images/erha.jpg',
            name: '二哈'
          }
        ]
      }
    ],
    curIndex: 0,
    isScroll: false,
    toView: 'erha'
  },
  onReady() {
    // var self = this;
    // wx.request({
    //   url: 'http://www.gdfengshuo.com/api/wx/cate-detail.txt',
    //   success(res) {
    //     console.log(res.data)
    //     self.setData({
    //       detail: res.data.result
    //     })
    //   }
    // });

  },
  onLoad() {
    const _this = this;
    classData.getClassData();
    _this.setData({
      "details": classData.getClassData()[0]
    })
  },
  switchTab(e) {
    let index = e.target.dataset.index;
    classData.getClassData();
    this.setData({
      "curIndex": index,
      "details": classData.getClassData()[index]
    })
  }

})

class.wxml:


<view class="main">
    <view class="class-left">
        <view wx:for="{{category}}" wx:for-index="index" wx:for-item="item" wx:key="idx">
          <view data-id="{{item.id}}" data-index="{{index}}" bindtap="switchTab" class="cate-list {{curIndex === index?'on':''}}">{{item.name}}</view>
        </view>
    </view>

    <scroll-view class="class-right" scroll-y="{{isScroll}}" scroll-into-view="{{toView}}" scroll-with-animation="true">
        <block wx:for="{{details}}" wx:for-item="dt" wx:for-index wx:key="idx">
            <view data-id="{{dt.id}}" class="cate-box">
                <view class="cate-banner">
                    <image src="{{dt.banner}}" wx:if="{{dt.banner}}"></image>
                </view>
                <view class="cate-title">
                    <text>{{dt.cate}}</text>
                </view>
                <view class="product">
                    <view class="product-list" wx:for="{{dt.detail}}" wx:key="index" wx:for-item="val">
                        <navigator url="../detail/detail">
                            <image src="{{val.thumb}}" wx:if="{{val.thumb}}"></image>
                            <view class="classname"><text>{{val.name}}</text></view>
                        </navigator>
                    </view>
                </view>
            </view>
        </block>
    </scroll-view>
</view>

class.wxss:

@import '../../common/common.wxss';

page,.main {
    height: 100%;
}

.class-left {
    float: left;
    width: 150rpx;
    height: 100%;
    border-right: 1px solid #eeeeee;
    box-sizing: border-box;
}

.class-left .cate-list {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    border-left: 3px solid #ffffff;
}

.class-left .cate-list.on {
    color: #ddbb99;
    border-color: #ddbb99;
}

.class-right {
    float: right;
    width: 600rpx;
    height: 100%;
    overflow: hidden;
    
}

.cate-box {
    height: 100%;
    padding:40rpx;
    box-sizing: border-box;
}

.cate-box .cate-banner image {
    display: block;
    width: 100%;
    height: 190rpx;
}

.cate-title {
    position: relative;
    height: 30rpx;
    line-height: 30rpx;
    padding:30rpx 0 55rpx;
    text-align: center;
    color: #ddbb99;
    font-size: 28rpx;
}

.cate-title::before {
    position: absolute;
    left: 100rpx;
    top: 43rpx;
    content: '';
    width: 60rpx;
    height: 4rpx;
    background: #ddbb99;
}

.cate-title::after {
    position: absolute;
    right: 100rpx;
    top: 43rpx;
    content: '';
    width: 60rpx;
    height: 4rpx;
    background: #ddbb99;
}

.product-list {
    display: inline-block;
    width: 240rpx;
    height: 240rpx;
    text-align: center;
    margin:0 20rpx 20rpx 0;
    font-size: 24rpx;
}

.product-list image {
    width: 180rpx;
    height: 180rpx;
    margin-bottom: 20rpx;
    border-radius: 100px;
}

.product-list:nth-child(3n) {
    margin-right: 0;
}

想要實(shí)現(xiàn)的界面效果如下:
圖片描述

但現(xiàn)在根據(jù)上面的代碼運(yùn)行后界面是這樣的:
圖片描述

點(diǎn)擊二哈/飯飯/平頭哥/七餃能console各自的數(shù)據(jù),但是數(shù)據(jù)沒有在界面中顯示(沒有任何報(bào)錯(cuò))

console的數(shù)據(jù)如下:
圖片描述

請(qǐng)各位大佬幫我看下不顯示在wxml的原因,謝謝啦!

回答
編輯回答
傲嬌范
<view class="class-left">
    <view wx:for="{{category}}"  wx:for-index="index" wx:for-item="item" wx:key="idx">
         <view data-id="{{item.id}}" data-index="{{index}}" bindtap="switchTab" class="cate-list {{curIndex === index?'on':''}}">{{item.name}}</view>
         </view>
    </view>
</view>
2018年7月3日 23:36
編輯回答
臭榴蓮
this.setData({
      "curIndex": index,
      "details": classData.getClassData()[index]
    })

這個(gè)details賦值的時(shí)候少了[],應(yīng)該寫成[classData.getClassData()[index]]

2018年5月24日 13:40