<!--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;
}