Luminous Prologue:
If one thing is overdone, it will be the opposite, just like love. If you love too much, you will become enchanted and become hatred. Sometimes I think that what is most desired in Yue ’s heart is home, followed by love, so in order to fulfill her, she can only help her give up love first.
Text:
Recognize the Tao with the Tao
<!--pages/classtype/class.wxml-->
<!-- 首先呢，我们需要一个容器 -->
<view class="container">
<!-- 菜单 -->
<view class="menu">
<!-- 还需要一个view来进行包裹 -->
<!-- 展示分类 -->
<view class="classtype" wx:for="{{classType}}"
wx:key="index">
<text id="{{item.id}}">{{item.name}}</text>
</view>
</view>
<!-- 产品列表 -->
<view class="list">
<view class="productList" wx:for="{{productList == ''?productAll:productList}}" wx:key="index">
<image src="{{item.src}}"></image>
<view class="info">
<text>{{item.name}}</text>
<text>{{item.price}}</text>
</view>
</view>
</view>
</view>// pages/classtype/class.js
Page({
/**
* 页面的初始数据
*/
data: {
// 是一个数组
// 这个是分类的变量
classType:[
{
"id":1,
"name":"抱枕"
},
{
"id": 2,
"name": "小说"
},
{
"id": 3,
"name": "漫画"
},
{
"id": 4,
"name": "手办"
},
],
//分类后的产品列表
productList:[],
//初始数据
productAll:[
{
"id": 1,
"price": 1111,
"src": "/images/12.jpg",
"title": "臻品",
"classid":2
},
{
"id": 2,
"price": 1111,
"src": "/images/7.jpg",
"title": "臻品",
"classid": 3
},
{
"id": 3,
"price": 1111,
"src": "/images/9.jpg",
"title": "臻品",
"classid": 4
},
{
"id": 4,
"price": 1111,
"src": "/images/11.jpg",
"title": "臻品",
"classid": 5
},
{
"id": 5,
"price": 1111,
"src": "/images/21.png",
"title": "臻品",
"classid": 6
},
{
"id": 6,
"price": 1111,
"src": "/images/22.jpg",
"title": "臻品",
"classid": 7
}
,
{
"id": 7,
"price": 1111,
"src": "/images/24.jpg",
"title": "臻品",
"classid": 1
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
<!--pages/classtype/class.wxml-->
<!-- 首先呢，我们需要一个容器 -->
<view class="container6">
<!-- 菜单 -->
<view class="menu">
<!-- 还需要一个view来进行包裹 -->
<!-- 展示分类 -->
<view class="classtype" wx:for="{{classType}}"
wx:key="index">
<text id="{{item.id}}">{{item.name}}</text>
</view>
</view>
<!-- 产品列表 -->
<view class="list">
<view class="productList" wx:for="{{productList == ''?productAll:productList}}" wx:key="index">
<image src="{{item.src}}" mode="widthFix"></image>
<view class="info">
<text>{{item.name}}</text>
<text>{{item.price}}</text>
</view>
</view>
</view>
</view>/* 夜光：接下来，我们写样式 */
/* 首先是一个容器 */
.container6{
width: 100%;
display: flex;
flex-direction: row
}
.menu{
width: 20%;
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #576b95;
}
An event needs to be bound here
<!--pages/classtype/class.wxml-->
<!-- 首先呢，我们需要一个容器 -->
<view class="container6">
<!-- 菜单 -->
<view class="menu">
<!-- 还需要一个view来进行包裹 -->
<!-- 展示分类 -->
<view class="classtype" id="{{item.id}}" bindtap="searchTab" wx:for="{{classType}}"
wx:key="index">
<text>{{item.name}}</text>
</view>
</view>
<!-- 产品列表 -->
<view class="list">
<view class="productList" wx:for="{{productList == ''?productAll:productList}}" wx:key="index">
<image src="{{item.src}}" mode="widthFix"></image>
<view class="info">
<text>{{item.title}}</text>
<text>{{item.price}}</text>
</view>
</view>
</view>
</view>// pages/classtype/class.js
Page({
/**
* 页面的初始数据
*/
data: {
// 是一个数组
// 这个是分类的变量
classType:[
{
"id":1,
"name":"抱枕"
},
{
"id": 2,
"name": "小说"
},
{
"id": 3,
"name": "漫画"
},
{
"id": 4,
"name": "手办"
},
],
//分类后的产品列表
productList:[],
//初始数据
productAll:[
{
"id": 1,
"price": 1111,
"src": "/images/12.jpg",
"title": "臻品",
"classid":2
},
{
"id": 2,
"price": 1111,
"src": "/images/7.jpg",
"title": "臻品",
"classid": 1
},
{
"id": 3,
"price": 1111,
"src": "/images/9.jpg",
"title": "臻品",
"classid": 4
},
{
"id": 4,
"price": 1111,
"src": "/images/11.jpg",
"title": "臻品",
"classid": 2
},
{
"id": 5,
"price": 1111,
"src": "/images/21.png",
"title": "臻品",
"classid": 3
},
{
"id": 6,
"price": 1111,
"src": "/images/22.jpg",
"title": "臻品",
"classid": 4
}
,
{
"id": 7,
"price": 1111,
"src": "/images/24.jpg",
"title": "臻品",
"classid": 1
}
]
},
searchTab(e){
var p = this.data.productAll;
var id = e.currentTarget.id;
console.log(e);
var list = []
//有了这个id之后呢
for(var i = 0;i<p.length;i++){
if(p[i].classid == id){ //如果这个id就等于即执行下面
list.push(p[i]) //放到我们上面声明的变量里面去
}
}
this.setData({
productList: list
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
