微信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/%E8%B7%AF%E6%98%93%E5%A8%81%E7%99%BB--M20761_PM2_Front%20view.jpg?wid=555&hei=555',name: 'RED 挎包',price: '13566'
}, {id: '002',img: 'https://secure.louisvuitton.cn/images/is/image/lv/1/PP_VP_AS/%E8%B7%AF%E6%98%93%E5%A8%81%E7%99%BB--M20379_PM2_Front%20view.jpg?wid=555&hei=555',name: 'BLUE 挎包',price: '16566'
}, {id: '003',img: 'https://secure.louisvuitton.cn/images/is/image/lv/1/PP_VP_AS/%E8%B7%AF%E6%98%93%E5%A8%81%E7%99%BB--M20379_PM2_Front%20view.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+OgwaW9rJXqthvol63XE+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、Arrayvalue: 0 // 默认值}},// 组件的内部数据，内部自己使用data: {},// 组件的方法列表methods: {go(event) {// getCurrentPages方法获取所有页面栈，相当于历史记录const pages = getCurrentPages();// 页面栈中最后的元素是最新的/当前的页面，navigateTo访问新页面会入栈相当于push，返回旧页面会出栈相当于popconst 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><buttonclass="{{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 //获取当前事件的idconst index = this.data.likeList.findIndex(i => i.id === id)//判断likeList中有没有，有就删，没有就把list的下标添加到likeListif(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}}"绑定当前 --><buttondata-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就returnthis.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(){ //初始为falseconsole.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-containershow="{{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><viewclass="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><viewclass="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;
}

微信LV项目（全流程）相关推荐

项目开发流程_视频网课：房地产开发项目全流程全税种税收筹划
致CFO:今天不税筹,明天就愁税为了支持企业发展,国家出台了诸多税收优惠政策.但因不同行业税种多样,如房地产业涉税就有20余种,如何做到用好优惠政策,优化缴税结构?避免重复纳税,降低财务成本,还要合 ...
pythonmysql部署_详解centos7+django+python3+mysql+阿里云部署项目全流程
(PS:本文假设你已经在本地联调好django和客户端,只是需要将django部署到外网) 购买阿里云服务器到[阿里云官网],选择轻量应用服务器, 步骤如图所示: 地域随便选择哪一个,镜像的话,对比 ...
Java对接微信支付(完整全流程)
Java对接微信支付及支付回调通知的全流程一.所用框架.对接微信支付我们技术组用的是payment框架,因为该框架已整合springboot因此很方便快捷 <dependency>< ...
这份【互联网项目全流程表】，实在是泰裤辣！！！
互联网行业是一个快速变化的行业,作为半个互联网人.太明白用户和环境每天都在不停地变化是什么感受了. 从项目开始到项目结束,要经历立项.计划.执行.结项,项目一周一个,一周一个.(**的)为了省时间就 ...
项目全流程 (1/3)
目录前言一.环境搭建-spring 1.1 IDEA环境搭建 1.1.1 创建项目配置 1.1.2 选择Springboot版本 1.1.3 项目设置 1.1.4 导入pom.xml文件 1.1. ...
storm throw 口袋妖怪_初版storm项目全流程自动化测试代码实现
由于项目需要,写了版针对业务的自动化测试代码,主要应用场景在于由于业务日趋复杂,一些公共代码的改动,担心会影响已有业务.还没进行重写,但知识点还是不少的与大家分享实践下.首先,介绍下整个流处理的业务流 ...
【Git】码云Gitee.com管理项目全流程
Gitee.com 是 OSCHINA.NET 推出的代码托管平台,支持 Git 和 SVN,提供免费的私有仓库托管.目前已有超过 500 万的开发者选择 Gitee. 官网:https://gite ...
python自动化测试项目全流程
之前做的一个自动化项目,大概总结了一下. 1.先整理好一个完整流程的接口,这里需要导入requests模块,因为涉及到新建需要随机命名的,所以还增加了random模块 2.对接口进行封装(def):接 ...
【微信小程序】微信支付接入全流程
一. 前置条件接入支付首先得需要有企业资质,并开通企业对公户注册微信支付并进行对公户打款认证二. 开始接入 1. 下载微信支付的AP证书 2. 服务端接入微信支付 2.1 引入相关maven配置 ...

微信LV项目（全流程）

一、创建页面

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

三、封装头部组件

四、lv-list 页面

五、lv-like 页面

六、右侧筛选器

微信LV项目（全流程）相关推荐

最新文章

热门文章