Prólogo luminoso:
Si una cosa se exagera, será lo contrario, al igual que el amor. Si amas demasiado, te encantará y te odiarás. A veces pienso que lo que más se desea en el corazón de Yue es el hogar, seguido del amor, por lo que para satisfacerla, ella solo puede ayudarla a renunciar al amor primero.
Texto:
Reconocer el Tao con el 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;
}
Un evento debe estar vinculado aquí
<!--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 () {
}
})
