微信小程式---分類
阿新 • • 發佈:2018-11-19
<!--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;
}