微信小程序---分类

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39019768/article/details/82011542

<!--pages/classifi/classifi.wxml-->
<scroll-view scroll-x class='viewa'>
    <view wx:for="{{lists}}" wx:key='' data-index='{{index}}' bindtap='liststap' class='viewai {{viewaiindex==index?"viewai_cheak":""}}'>{{item}}</view>
</scroll-view>

<import src='../../template/template.wxml' />

<template is='classification' data="{{...subjectsData}}" />

classifi页面通过模板引入主体内容

// pages/classifi/classifi.js
var app = getApp();
Page({
  data: {
    lists: ['全部', '分类一', '分类二', '分类三'],
    viewaiindex: 0,
    classifiData: [{
        branch: '1',
        img: '../../images/z01.png',
        name: '分类1',
       addtime: '1000',
       soft: '100'
      },
      {
        branch: '1',
        img: '../../images/z01.png',
        name: '分类1',
         addtime: '1000',
         soft: '100'
      },
      {
        branch: '2',
        img: '../../images/z01.png',
        name: '分类2',
         addtime: '1000',
         soft: '100'
      },
      {
        branch: '2',
        img: '../../images/z01.png',
        name: '分类2',
         addtime: '1000',
         soft: '100'
      },
      {
        branch: '3',
        img: '../../images/z01.png',
        name: '分类3',
         addtime: '1000',
         soft: '100'
      },
      {
        branch: '3',
        img: '../../images/z01.png',
        name: '分类3',
         addtime: '1000',
         soft: '100'
      }
    ],
    //classifiData: [],
    subjectsData: {
      play: true,//播放按钮
      subjects: []
    }
  },
  // 导航切换
  liststap: function(e) {
    var arr = [];
    var index = e.currentTarget.dataset.index,
      viewaiindex = this.data.viewaiindex,
      classifiData = this.data.classifiData,
      subjects = this.data.subjectsData.subjects;
    console.log(subjects)
    if (index == 0) {
        arr = classifiData
    }
    for (var i = 0, len = classifiData.length; i < len; i++) {
       if (index == classifiData[i].branch) {
        arr.push(classifiData[i])
      }
    }
    this.setData({
      subjectsData: {
        subjects: arr,
        play: true
      },
      viewaiindex: index
    })
  },
  onLoad: function() {
    this.setData({
      subjectsData: { 
        subjects: this.data.classifiData, 
        play: true
        }
     })
  },
})

主要js代码，以下为模板页面内容

<!--pages/template/template.wxml-->
<template name='classification'>
  <view class='viewb' bindtap='detail'>
    <view class='viewbi' wx:for="{{subjects}}" wx:key=''>
      <view class='viewbi_imgbox'>
        <image class='viewbi_img' src='{{item.img}}'></image>
        <image wx:if="{{play}}" class='viewbi_play' src='../../images/playbtn.png'></image>
      </view>
      <view class='viewbi_txt'>
        <view class='viewbi_txta'>{{item.name}}</view>
        <view class='viewbi_txtb'>
          <view class='viewbi_txtbi'>
            <image class='viewbi_txtbi_img' src='../../images/play.png'></image>
            <view class='viewbi_txtbi_num'>{{item.addtime}}</view>
          </view>
          <view class='viewbi_txtbi'>
            <image class='viewbi_txtbi_img' src='../../images/com.png'></image>
            <view class='viewbi_txtbi_num'>{{item.soft}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

wxss（classifi）

/* pages/classifi/classifi.wxss */

page {
    background: #f7f7f7;
    font-size: 30rpx;
}

.viewa {
    width: 100%;
    height: 100rpx;
    background: white;
    margin-top: 10rpx;
    white-space: nowrap;
    box-sizing: border-box;
}

.viewai {
    min-width: 25%;
    height: 100%;
    display: inline-block;
    text-align: center;
    line-height: 105rpx;
    box-sizing: border-box;
    border-bottom: 2px solid transparent;
    color: #666;
}

.viewai_cheak {
    color: #fea645;
    border-bottom: 2px solid #fea645;
}
@import '../../template/template.wxss'

模板页

/* pages/template/template.wxss */
page {
    background: #f7f7f7;
    font-size: 30rpx;
}
.viewb {
    box-sizing: border-box;
    padding: 20rpx 0;
    display: flex;
    flex-wrap: wrap;
}

.viewbi {
    margin-left: 4%;
    margin-bottom: 20rpx;
    width: 44%;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.05);
}

.viewbi_imgbox {
    width: 100%;
    height: 160rpx;
    position: relative;
}

.viewbi_img {
    display: block;
    width: 100%;
    height: 100%;
}
.viewbi_play{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    width: 50rpx;
    height: 50rpx;
}
.viewbi_txt {
    box-sizing: border-box;
    padding: 10rpx 20rpx;
}

.viewbi_txta {
    font-size: 28rpx;
    height: 76rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.viewbi_txtb {
    display: flex;
    align-items: center;
}

.viewbi_txtbi {
    display: flex;
    align-items: center;
    margin-right: 15rpx;
}

.viewbi_txtbi_img {
    display: block;
    width: 32rpx;
    height: 32rpx;
}

.viewbi_txtbi_num {
    text-indent: 10rpx;
    font-size: 24rpx;
    color: #666;
}