微信LV项目（全流程）

打开WX开发人员工具不使用模板

效果展示

一、创建页面

在app.json配置lv-list页面、和lv-like页面，header头部组件、menu喜欢的包装组件

二、在lv-list下创建.js手写文件数据

// CommonJS模块语法 module.exports = [{   id: '001',   img: 'https://secure.louisvuitton.cn/images/is/image/lv/1/PP_VP_AS/路易威登--M20761_PM2_Front view.jpg?wid=555&hei=555',   name: 'RED 挎包',   price: '13566' }, {   id: '002',   img: 'https://secure.louisvuitton.cn/images/is/image/lv/1/PP_VP_AS/路易威登--M20379_PM2_Front view.jpg?wid=555&hei=555',   name: 'BLUE 挎包',   price: '16566' }, {   id: '003',   img: 'https://secure.louisvuitton.cn/images/is/image/lv/1/PP_VP_AS/路易威登--M20379_PM2_Front view.jpg?wid=555&hei=555',   name: 'WHITE 挎包',   price: '24566' }]; 

三、封装头部组件

wxml页面

<!-- header组件wxml页面 --> <view class="header">  <button class="btn nav"></button>  <button class="btn" data-type="like" bindtap="go"></button>  <view class="logo"  data-type="list" bindtap="go"></view>  <button class="btn"></button>  <button class="btn"></button> </view> 

wxss页面

.header {   display: flex;   justify-content: space-between;   height: 100rpx;   padding: 0 27rpx;   border-bottom: 3rpx solid #e3e2dd; } .header .btn {   width: 72rpx;   height: 100%;   padding: 0;   background-repeat: no-repeat;   background-position: center;   background-size: 45.3rpx; } .header .nav {   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAATElEQVRo3u3WIQ6AMBAEwIJF1fX/r8Oh0PQJh2hyl2ZGr9h12xoAQDnHn9Do15dZ8n7esOeZWXAlQwBgJ75WNYYAwE58rWoMAQAgNAE5UwwWx5fWLgAAAABJRU5ErkJggg==); } .header .like {   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAD10lEQVRo3u2YW0wTWRzGP7YmSioYHjbBywOxUtHqQlssVFoaRZGSFblUQZFdRRONoiLRDRKrhA1EiURUDC4EDVEMSlayZDEYr1EjCF4KUkAttAUk kQg sI2HB/IHN1V6Ex3BomZX9KHtud/vu87/zlz2gFERERERERERESEwsvTwms1V4i1vQ3W9nZY219AIpFApQ7FgkA5YoxGqJaFf3Vuy7MW8ufVq jq7EBnhxX/uFwICAiANkKHdQmJUKo1HnvizIH9e4i/n3TCV1qKify3Lu9IDpk/98cJ63J yyI9tpeEqydO6Z2O7tHsA1led2/fAgDIZIFYGhyMMO1ySCQSPG58hMdNjejv6wUA PjOwmvngBcApKdtJNf/rgMA M eA5U6FBH6SMyYMR1PWlrwpKUZr192AQAC5UEo aMMwSFq/rszPDQojdJr6cqdPlk47qplZuyk4 Jjo0l62kb6vqKsdNy6kyeO0XFRei0ZHhqU8h6kpLiIily eMFt62821H9x2bDRuVRZQceXFBdxvsQmZKC/164JURB/PynJzNjJevITx/OpKXP2QdZ1TEc1IQoy0N9r5y1IQd5Raqi58SGnVdKHqckKXRinmubGh1Sv4PdcVrU/sBn0pr8PABAdEwuNVsdpAyaYTEgybeC0cBqtzisqeg0AwGnvYVXDKojDMdbdoEWLORkCgE2paffXJ6fUcq2TyRb8S9sd09gM6rF1AwDkCxdyDuI/Z56BcxGAxYolY0Hs7IKw6oiPrw8AwOVyeeLJI0ZGRgAA3t7e/AXRRY4talurZdKCWJ4/AwCo1KH8BQkOUQIAmpuaJi1Im8UCAFCq1PxN6rDbRn8Kkrk9mfmioqzU49u9W5izRB uJl0dVsHCOOy2UcPyZZwPX04CTFfiY6MFC7Lt11ThusFQfu4sFdmSmsy7yOe/INie6B6TtXcXFcs9nM2bWOX58k8h8o4Kvg8BABsS1lLRhvq//rforRvXBe30hGxOSaLi1VWVHosXFRbQeVYbIiY3BMO 3TuoiaLCAs4mtm/5tLGT1hq/TQiG9F82UTMZO7aRd28HzrmrcTq6R01xsbRu6 aUbxuCIT/XTE3FREWS2zcbxjX24N4dslIXTsfn55qnRgiGmuoqolTIqcG8IzlfGCw9U0y/VyrkpKa6amqFYGi1PCXJiXHU7JoVOmJ71Un6nPb36 N/pp8nJ8aRVsvTqRnic8yHDo773Mp8iP1/9ylBfV0tMa4y0ADGVQZSX1crWAhBH08ODw1KS04VvweAjH2ZM31n X0QUk9ERERERETke Ej0OrjZL5v2F8AAAAASUVORK5CYII=); } .header .user {   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAADd0lEQVRo3u2XXUhTYRjH/0ZZ27oRp4hu2VbpyjGTpaAUKoofCZF5UYiBgWEomhb5AQNBMAwpsfRCuugiEUT8QPyOIVLOUaBOLXNZdDbvOsMEO1I3bzftlbV0S8/ZdnF sIvxPh/v//14nvcAIiIiIiIi ydIiKAOlt161vZEtvJ GR WlwEA57RanI3TouLuvR hcvlxfwv3iNk0QzRqJYkIkf3zp1Eridk0Q/jOy uO9HR3kbvlpfS/UhmN5IuXAACzb17DbmfoWFtHJ64XFglyIg6EjWGIOiqcrnzt/Sq3Va 9X0XH1VHhxMYwvO/MgWlsMNBJTk8Zd53g9JSR2jU2GHgTcoivQJ9WVwEAGVk5SE3P2PXIpKZnBGVk5bj4BJSQRcs8AECpPOHR1mnj9AkoIf6GNyG6 AQAgN1u82jrtHH6BJSQM7GxAADj5Dgs83O7XmLL/BwxTo67 AQUf5ffocF NzFDg/2ClV9BG2J2bh6U0ScBAHbmKybGRuhYwDZEJ/56ogiCg2W3DHUPSFpKEhWQlpJEDHUPiINlt/w9v31hYxifPEV4P6Mcx VPjI30L1oW4GBZONhvAIBQeRhC5XLo4s8jOzfvmlQqHQhIIdNTRtLd9RKTYyPY3ub2tJVIpMjKzUNh0c09nzM FbK bicdT1vx4nmn21hw8FGoT50GAHz5vIZfv3662dy6XYryymooFEr/VTDjqwmSrNfRC63Xakh7WysZHx0ma1ar271Ys1rJ OgwaW9rJXqthvol3XE+GrCP5XMUF/jUlbvlBT/V0VysOzWnZJilxiG+hrfiqmuKNvpCyrFgfqC2TRDNCoFjVddUeYbMQN9vTRpQlwMb0kT4mJo3IG+XmHFcByXn5maQhPy2R9sDEPjZqamEI7j8gUT0tLcRJP1dHfxvmo93V00fktzkzC7smRZIKrIMBIRIiOVZaWCbX1lWSmJCJERVWQYWbIseJ3H6+8R86yJNrrMrGyhdCA79zIAYHubg3nW5LWf10LevTUDAI5JJNAnJgkmRH8hCRKJ1CUnr8T+KZEFV/IEL483Cq6SiBAZiVUp+D1aNoYhm983AAAXBNwNJ/rERADA5vcNeFsZD3tjZP24suNw5DAEqygech9YyOrqTrDHjx76SoNb7r3w6mhxHOeNmSD4M7eIiIiIiIiIv/gN2k+6D8b3VfgAAAAASUVORK5CYII=);
}
.header .cart {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAD+klEQVRo3u1YXWhTZxh+upykrLFq+qMRu+Y0J7ZJ2to2pXVWmIo/lGJ1FGRlUArbRd2kXZ2KoyL1X+aso3ijKMKuRCh1bqyWeGGhFWHixI21yck5SdPdCOsPNC30pBfHi5DTw+rM9zU5qRfngQPfyXnf73uf9+d7XwLo0KFDhw4dK0eGFptOhMPys6fDeDoyjGcjw2CMDHbv3Y+Pt9ehuqYWmzcXaHJuSvHT3Tuy1WJ+53P39i051eem1DNXLp6Te3uuAgAsOblwbClGidMFhmHg942B9/swNfkvAOCr9k50n7/0/kWm7ctWxePfdhz9X49/c/SIItf2RWvKI5MU+u7fU4y70H0moXFnz3Qp8n33770fZKSFhfJ9O3fIVotZbmk+TGxUS/Nh2Woxy/t27pClhYXy1eaB3uvXFO96BweIiXgHBxS93uvXVj8qez6po45GHOqoJGvHB8koR2Znb4aCAgCg4UAjtf7uPXsBAEFRQCQSuZksmRXjxfPflfQIBUVqr6r1X738I6moJBWRoCgo6yI7lwEAJzrbEzbErlMnZACorqlV+oio2msloG5Iv/zcL/t9Y8p7z/eXUV5Rif31DeB9Pvz6sJ9on8ZDTSh2OvGwvw9CgMfxU13KtxKnCwc/baKyjUp4enoq5OYK2aRcR4hRYWIyJzc3n1SeKrWCopgWEgAgCoE8GnkqIiFVHg88HsLrmfkM9aNOj0Q43X1+mf5v3icqp9HVDBWReEGuXbceds7x53+/n/zuNFGqbq2oQnvn8WWyhSy7mGVeAwAQhIB2RIKiCAAoLnFivcVS8TaZ1zPzGZev9qC0bCuMRqPyu3lNNmq2bccPP96Ad2jkrYTz8zeYbDY2dpaQ3C32TsS7eMfXbUR3/mI0mjc2+rcs8Dxxj2j9/DPZajHLu+pqqfoKQyooSZJtS+EmAICdcxDpGE2mSVDejIUsCyBWI5Ik2TIzM8MkesSpFRKF8WhUAgBwHEdjGxXiqRWNShB4/zipHjGReH0A5BFZCUqcLmUd4HliPXIiwaXis3OOJq2IVHo8txQiAX/qicS9Y2OL8GFW1gOtiGRnrz2yYaMVACBS3FzkRPw+AIDLXaYVBwU2tggAEKToJcREeD4WZldpaRqIsADoJmIiIv9MhOW5yCwAwJ2GiFRWVQMA5uciCI+HiPoJERH13ON0uzUnUuWpVtYBnqzgiYjw/qXN7JzDpDWRSo9n3RIRsiuYkEis0E2mTBgMhkWtiRgMzCzDxOY0IUBGhGhECagKvf1YfVr+uvEOPsJfr14SpxbRHOR22OTpqcl02L8MObl5GBXCCe0kSq0iu3azVSIUFHy0amfr0KFDhw4dOlYLbwCWLY6ILH/ypgAAAABJRU5ErkJggg==);
}
.header .logo {
  flex: auto;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUxIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTUxIDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02Ny42MzcuMjkzbDMuODE2IDkuMjA1TDc1LjI2OS4yOTNoMi43MjVMNzEuNzQ2IDE1LjM5bC0uMjkzLjI5NC0uMjk0LS4yOTRMNjQuOTExLjI5M2gyLjcyNnptLTEzLjcxMiAwYzEuNDY4IDAgMi44Ni43NjcgMy42MjcgMS44ODdsLTEuNDY3IDEuNDY4aC0uNDYyYy0uMzA0LS42NS0uOTczLTEuMDQ4LTEuNjk4LTEuMDQ4LS44NjMgMC0xLjY3Mi43MS0xLjcyIDEuNjE0LS4wMzUuNjguMjc3IDEuMTA1Ljg0IDEuNDY4LjYwNi4zOTEuODU0LjU1NCAxLjY3NyAxLjAwNi44OTcuNDkzIDMuMTY2IDEuNDYgMy4xNjYgNC4wMDUgMCAyLjUwOS0yLjA5NyA0Ljg0My00LjgwMiA0Ljg0My0uMzQ3IDAtLjk3Ni0uMDM5LTEuNDQ2LS4xNDctMS4zMjUtLjMyMS0yLjEyOS0uODIyLTIuOTk4LTEuODQ1bDEuODg3LTEuOTI5LjY1LjU0NWMuMjkzLjIzLjkzNy42OTMgMS41NS43NzYgMS4yNDYuMTY5IDIuMDgyLS42NTUgMi4yNDQtMS40NjguMTI5LS42NDItLjAzNC0xLjYtMS4wNjktMi4wOTYgMCAwLTEuODY2LTEuMDM3LTIuNjg0LTEuNTEtLjgzMy0uNDgyLTEuNzE5LTEuNzk4LTEuNzE5LTMuMzc1IDAtMS4xNzQuNTM4LTIuMzExIDEuNDA1LTMuMTAzLjY3LS42MTQgMS41ODktMS4wOSAzLjAxOS0xLjA5ek0xMzguNjcgMGw5Ljc3IDkuNzdWLjU4N2wuMjk0LS4yOTRoMS45MjlsLjI5NC4yOTR2MTQuODAyaC0uNDYybC05LjYwMi05LjYwMnY5LjMwOWwtLjI5NC4yOTNoLTEuOTI5bC0uMjkzLS4yOTNWLjI5M0wxMzguNjcgMHptLTI4LjgwNy4yOTN2Mi4yMjNsLS4yOTQuMjkzaC0yLjIyMnYxMi41OGgtMi41MTZWMi44MDloLTIuNTE2Vi41ODdsLjI5NC0uMjk0aDcuMjU0em05LjIyNSAwdjIuMjIzbC0uMjk0LjI5M2gtMi4yMjJ2MTIuNThoLTIuNTE2VjIuODA5aC0yLjUxNlYuNTg3bC4yOTQtLjI5NGg3LjI1NHpNMi41MTYuMjkzdjEyLjU4aDUuMDMydjIuNTE2SDBWLjU4N0wuMjkzLjI5M2gyLjIyM3ptMTQuMjU3IDBhNy41NDggNy41NDggMCAxMTAgMTUuMDk2IDcuNTQ4IDcuNTQ4IDAgMDEwLTE1LjA5NnptMTExLjU0IDBhNy41NDggNy41NDggMCAxMTAgMTUuMDk2IDcuNTQ4IDcuNTQ4IDAgMDEwLTE1LjA5NnptLTk4LjQxNSAwbC4yOTMuMjk0djkuNzdhMi41MTYgMi41MTYgMCAwMDUuMDMyIDBWLjU4N2wuMjk0LS4yOTRoMS45MjlsLjI5My4yOTR2OS43N2E1LjAzMiA1LjAzMiAwIDAxLTEwLjA2NCAwVi41ODdsLjI5NC0uMjk0aDEuOTI5em0xNS4zODkgMHYxNC44MDNsLS4yOTQuMjkzaC0yLjIyMlYuNTg3bC4yOTMtLjI5NGgyLjIyM3ptMzcuNDQ2IDBsLjI5My4yOTR2OS43N2EyLjUxNiAyLjUxNiAwIDAwNS4wMzIgMFYuNTg3bC4yOTQtLjI5NGgxLjkyOGwuMjk0LjI5NHY5Ljc3YTUuMDMyIDUuMDMyIDAgMDEtMTAuMDY0IDBWLjU4N2wuMjk0LS4yOTRoMS45Mjl6bTE1LjM4OSAwdjE0LjgwM2wtLjI5NC4yOTNoLTIuMjIyVi41ODdsLjI5My0uMjk0aDIuMjIzek0xNi43NzIgMi44MWE1LjAzMiA1LjAzMiAwIDEwLjAwMSAxMC4wNjUgNS4wMzIgNS4wMzIgMCAwMDAtMTAuMDY1em0xMTEuNTQxIDBhNS4wMzIgNS4wMzIgMCAxMDAgMTAuMDY1IDUuMDMyIDUuMDMyIDAgMDAwLTEwLjA2NXoiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg==) no-repeat center center / 210rpx;
}

.header .tag {
  width: 23rpx;
  line-height: 23rpx;
  margin: 25rpx 0 0 50rpx;
  border-radius: 50%;
  background: #372d24;
  color: #fff;
  text-align: center;
  font-size: 14rpx;
  overflow: hidden;
}

 .js结构

// 页面用Page方法定义，组件用Component定义
// 组件需要在json文件中设置"component": true
Component({
  // 组件的自定义属性，外部传入的
  properties: {
    count: {
      type: Number, // 数据类型 String、Boolean、Object、Array
      value: 0 // 默认值
    }
  },

  // 组件的内部数据，内部自己使用
  data: {

  },

  // 组件的方法列表
  methods: {
    go(event) {
      // getCurrentPages方法获取所有页面栈，相当于历史记录
      const pages = getCurrentPages();
      // 页面栈中最后的元素是最新的/当前的页面，navigateTo访问新页面会入栈相当于push，返回旧页面会出栈相当于pop
      const currentPage = pages[pages.length - 1];
      // 获取当前页面的路径
      const { route } = currentPage;
      // 收藏按钮有子元素，target可能是子元素
      const { type } = event.currentTarget.dataset;
      // 判断要跳转的路径是当前页面，就不跳了
      if (route.includes(type)) return;
      wx.navigateTo({
        url: `/pages/lv-${type}/lv-${type}`
      });
    }
  }
})

 分别在list和like页面.json中引入组件

  "usingComponents": {
    "header":"/components/header/header",
    "menu":"/components/menu/menu"
  }

四、lv-list 页面

1、标题

lv-list wxml页面
<!-- 所有包标题 -->
<view class="title">
  <view class="name">所有包款</view>
  <view class="filter" bindtap="showMenu">显示筛选器</view>
</view>

.js结构
showMenu(){
  console.log('showMenu');
  this.setData({
    show: true
  })
},

2、包包列表 

wxml页面
<wxs module="wxs">
function some(arr,id){
	return arr.some(function(i){
		return i.id === id
	})
}
module.exports={
	some:some
}
</wxs>
<!-- 包包列表 -->
<view class="list">
	<view class="item" wx:for="{
    
      {list}}" wx:key="id">
		<image src="{
    
      {item.img}}" mode="aspectFit"></image>
		<view class="name">{
    
      {item.name}}</view>
		<view class="price">{
    
      {item.price}}</view>
		<button
			class="{
    
      {wxs.some(likeList,item.id ) ? 'checked':''}}"
			data-id="{
    
      {item.id}}"
			bindtap="toggle"
		></button>
	</view>
</view>

.js结构

const list = require('./list.js')//导入数据

data:{
    list,//挂载到页面上
    likeList:[], //存放当前下标
},
// onLoad在navigateBack回来时不会执行，返回来时只执行onShow
// 本页面通过navigateTo跳转到别的页面时，本页面不会销毁/不执行onUnload，只执行onHide
onShow(){
  wx.getStorage({ //从本地缓存中异步获取指定 key 的内容
    key:'like-list',
    success:({data}) =>{
      this.setData({
        likeList:data 
      })
      console.log(data);
    }
  })
},
toggle({target}){
  const  {id}  = target.dataset //获取当前事件的id
  const index = this.data.likeList.findIndex(i => i.id === id)
  //判断likeList中有没有，有就删，没有就把list的下标添加到likeList
  if(index === -1){
    this.data.likeList.push(this.data.list.find(i => i.id === id))
  }else{
    this.data.likeList.splice(index,1)
  }
  this.setData({
    likeList:this.data.likeList //把新的下标赋值到定义的字段中
  })
  wx.setStorageSync('like-list',this.data.likeList) //将数据存储在本地缓存中指定的 key 中
},

五、lv-like 页面

wxml页面 可以直接把list页面的包包结构拿过来使用 更新data数据中定义的字段即可likeList
注意添加新的删除事件
<header count="{
    
      {likeList.length}}"/>

<view class="list">
	<view class="item" wx:for="{
    
      {likeList}}" wx:key="id">
		<image src="{
    
      {item.img}}"></image>
		<view class="name">{
    
      {item.name}}</view>
		<view class="price">{
    
      {item.price}}</view>
		<!-- data-index="{
    
      {index}}"绑定当前 -->
		<button
			data-index="{
    
      {index}}"
			bindtap="del"
		>×</button>
	</view>
</view>

.js结构 
Page({
  data:{ 
    likeList:[]
  },
  onShow(){//监听页面显示
    //this指向问题，1.把外面的this定义成变量使用
    const self = this;
    wx.getStorage({
      key:'like-list',
      success({data}){
        self.setData({
          likeList:data
        })
      }
    });
    
  },
  //弹框是否删除
  del({target:{dataset:{index}}}){
    wx.showModal({
      title: '将此内容从您的愿望录中移除',
      content:'请确认是否将此内容从您的愿望录中移除取',
      confirmText:'删除',
      success:({confirm})=>{ //confirm 为 true 时，表示用户点击了确定按钮
        if(!confirm) return // 点击取消false就return
        this.data.likeList.splice(index,1) //否则就删除当前下标的数据
        this.setData({
          likeList:this.data.likeList // 更新当前数据状态
        });
        wx.setStorageSync('like-list', this.data.likeList)
        // wx.setStorageSync将数据存储在本地缓存中指定的 key 中。
        //会覆盖掉原来该 key 对应的内容。
        //除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。
      },
    })
  }
})

 六、右侧筛选器

lv-list页面

<!-- 右侧筛选器 -->
wxml 页面
<menu 
	show="{
    
      {show}}"
	bind:close = "closeMenu"
	bind:filter = "filter"
/>
.js 结构
// 右侧筛选器
closeMenu(){ //初始为false
  console.log('closeMenu');
  this.setData({
    show:false
  })
},
filter({detail}){
  console.log(Object.values(detail).flat().filter(i => i.checked).map(i => i.label));
}

menu 组件中

wxml页面
<wxs module="seec">
function checkedLength(arr) {
  return arr.filter(function(i) {
    return i.checked;
  }).length;
}
module.exports = {
  checkedLength: checkedLength
};
</wxs>

<page-container
  show="{
    
      {show}}"
  position="right"
  bind:afterleave="close"
>
  <view class="top">
    <view class="title">
      显示筛选器
      <block wx:if="{
    
      {seec.checkedLength(formData.category) + seec.checkedLength(formData.color) > 0}}">
        ({
    
      {seec.checkedLength(formData.category) + seec.checkedLength(formData.color)}})
      </block>
    </view>
    <view class="reset">重置所有筛选</view>
    <button bindtap="close">X</button>
  </view>

  <view class="category-list">
    <view class="title">
      目录
      <block wx:if="{
    
      {seec.checkedLength(formData.category) > 0}}">
        ({
    
      {seec.checkedLength(formData.category)}})
      </block>
    </view>
    <view
      class="category-item"
      wx:for="{
    
      {formData.category}}"
      wx:key="label"
      data-index="{
    
      {index}}"
      data-type="category"
      bindtap="toggle"
    >
      <view class="checkbox{
    
      {item.checked ? ' checked' : ''}}"></view>
      <text>{
    
      {item.label}}</text>
    </view>
  </view>

  <view class="color-list">
    <view class="title">
      颜色
      <block wx:if="{
    
      {seec.checkedLength(formData.color) > 0}}">
        ({
    
      {seec.checkedLength(formData.color)}})
      </block>
    </view>
    <view
      class="color-item"
      wx:for="{
    
      {formData.color}}"
      wx:key="label"
      style="border: 1px solid {
    
      {item.checked ? '#000' : '#ccc'}}"
      data-index="{
    
      {index}}"
      data-type="color"
      bindtap="toggle"
    >
      <image class="img" src="{
    
      {item.img}}" mode="aspectFill" />
      <text>{
    
      {item.label}}</text>
    </view>
  </view>

  菜单内容
</page-container>

// components/menu/menu.js
Component({
  properties:{
    show:{
      type:Boolean,
      value:false
    }
  },
  data:{
    formData:{
      category: [{
        label: '斜跨包',
        checked: false
      }, {
        label: '手提包',
        checked: false
      }],
      color: [{
        label: '橙色',
        img: 'https://www.louisvuitton.cn/images/is/image/MAC-Z10_orange?wid=216&hei=216',
        checked: false
      },{
        label: '蓝色',
        img: 'https://www.louisvuitton.cn/images/is/image/MAC-Z04_bleu?wid=216&hei=216',
        checked: false
      }]
    }
  },
  methods:{
    close(){
      // 组件内部不允许修改properties
      // 子组件给父组件传值
      // triggerEvent派发/触发/发送/给/送出去 一个自定义事件
      this.triggerEvent('close');
    },
    toggle({ currentTarget }){
      const { index, type }= currentTarget.dataset;
      this.data.formData[type][index].checked = !this.data.formData[type][index].checked;
      this.setData({
        formData: this.data.formData
      });
      this.triggerEvent('filter', this.data.formData);
      //setData应只传发生变化的数据，减少数据通信量，小程序逻辑层和视图层分开
      //https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips/runtime_setData.html
       // this.setData({
      //   [`formData.${type}[${index}].checked`]: this.data.formData[type][index].checked
      // });
    }
  }
})

.top {
  display: flex;
}

.category-list, .color-list {
  margin: 50rpx 30rpx;
  border-top: 1px solid #333;
}
.color-list {
  display: flex;
  flex-wrap: wrap;
}
.color-item {
  width: 150rpx;
  height: 250rpx;
  margin: 10rpx;
  padding: 10rpx;
}
.color-item .img {
  width: 130rpx;
  height: 130rpx;
}

.category-list .checkbox {
  position: relative;
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
  border: 5rpx solid #333;
}
.category-list .checkbox.checked:after {
  content: "";
  position: absolute;
  width: 30rpx;
  height: 20rpx;
  border-left: 5rpx solid #333;
  border-bottom: 5rpx solid #333;
  transform: rotate(-40deg) translate(5rpx, 5rpx);
}
.category-item {
  display: flex;
  padding: 5rpx 0;
}