微信小程序之 Classify(商品属性分类)
1.项目目录
2.逻辑层
broadcast.js
- // pages/broadcast/broadcast.js
- Page({
- /**
- * 页面的初始数据
- */
- data: {
- firstIndex: -1,
- //准备数据
- //数据结构:以一组一组来进行设定
- commodityAttr: [
- {
- priceId: 1,
- price: 35.0,
- "stock": 8,
- "attrValueList": [
- {
- "attrKey": "型号",
- "attrValue": "2"
- },
- {
- "attrKey": "颜色",
- "attrValue": "白色"
- },
- {
- "attrKey": "大小",
- "attrValue": "小"
- },
- {
- "attrKey": "尺寸",
- "attrValue": "S"
- }
- ]
- },
- {
- priceId: 2,
- price: 35.1,
- "stock": 9,
- "attrValueList": [
- {
- "attrKey": "型号",
- "attrValue": "1"
- },
- {
- "attrKey": "颜色",
- "attrValue": "黑色"
- },
- {
- "attrKey": "大小",
- "attrValue": "小"
- },
- {
- "attrKey": "尺寸",
- "attrValue": "M"
- }
- ]
- },
- {
- priceId: 3,
- price: 35.2,
- "stock": 10,
- "attrValueList": [
- {
- "attrKey": "型号",
- "attrValue": "1"
- },
- {
- "attrKey": "颜色",
- "attrValue": "绿色"
- },
- {
- "attrKey": "大小",
- "attrValue": "大"
- },
- {
- "attrKey": "尺寸",
- "attrValue": "L"
- }
- ]
- },
- {
- priceId: 4,
- price: 35.2,
- "stock": 10,
- "attrValueList": [
- {
- "attrKey": "型号",
- "attrValue": "1"
- },
- {
- "attrKey": "颜色",
- "attrValue": "绿色"
- },
- {
- "attrKey": "大小",
- "attrValue": "大"
- },
- {
- "attrKey": "尺寸",
- "attrValue": "L"
- }
- ]
- }
- ],
- attrValueList: []
- },
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad: function (options) {
- },
- /**
- * 生命周期函数--监听页面初次渲染完成
- */
- onReady: function () {
- },
- /**
- * 生命周期函数--监听页面显示
- */
- onShow: function () {
- this.setData({
- includeGroup: this.data.commodityAttr
- });
- this.distachAttrValue(this.data.commodityAttr);
- // 只有一个属性组合的时候默认选中
- // console.log(this.data.attrValueList);
- if (this.data.commodityAttr.length == 1) {
- for (var i = 0; i < this.data.commodityAttr[0].attrValueList.length; i++) {
- this.data.attrValueList[i].selectedValue = this.data.commodityAttr[0].attrValueList[i].attrValue;
- }
- this.setData({
- attrValueList: this.data.attrValueList
- });
- }
- },
- /* 获取数据 */
- distachAttrValue: function (commodityAttr) {
- /**
- 将后台返回的数据组合成类似
- {
- attrKey:'型号',
- attrValueList:['1','2','3']
- }
- */
- // 把数据对象的数据(视图使用),写到局部内
- var attrValueList = this.data.attrValueList;
- // 遍历获取的数据
- for (var i = 0; i < commodityAttr.length; i++) {
- for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) {
- var attrIndex = this.getAttrIndex(commodityAttr[i].attrValueList[j].attrKey, attrValueList);
- // console.log('属性索引', attrIndex);
- // 如果还没有属性索引为-1,此时新增属性并设置属性值数组的第一个值;索引大于等于0,表示已存在的属性名的位置
- if (attrIndex >= 0) {
- // 如果属性值数组中没有该值,push新值;否则不处理
- if (!this.isValueExist(commodityAttr[i].attrValueList[j].attrValue, attrValueList[attrIndex].attrValues)) {
- attrValueList[attrIndex].attrValues.push(commodityAttr[i].attrValueList[j].attrValue);
- }
- } else {
- attrValueList.push({
- attrKey: commodityAttr[i].attrValueList[j].attrKey,
- attrValues: [commodityAttr[i].attrValueList[j].attrValue]
- });
- }
- }
- }
- // console.log('result', attrValueList)
- for (var i = 0; i < attrValueList.length; i++) {
- for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
- if (attrValueList[i].attrValueStatus) {
- attrValueList[i].attrValueStatus[j] = true;
- } else {
- attrValueList[i].attrValueStatus = [];
- attrValueList[i].attrValueStatus[j] = true;
- }
- }
- }
- this.setData({
- attrValueList: attrValueList
- });
- },
- getAttrIndex: function (attrName, attrValueList) {
- // 判断数组中的attrKey是否有该属性值
- for (var i = 0; i < attrValueList.length; i++) {
- if (attrName == attrValueList[i].attrKey) {
- break;
- }
- }
- return i < attrValueList.length ? i : -1;
- },
- isValueExist: function (value, valueArr) {
- // 判断是否已有属性值
- for (var i = 0; i < valueArr.length; i++) {
- if (valueArr[i] == value) {
- break;
- }
- }
- return i < valueArr.length;
- },
- /* 选择属性值事件 */
- selectAttrValue: function (e) {
- /*
- 点选属性值,联动判断其他属性值是否可选
- {
- attrKey:'型号',
- attrValueList:['1','2','3'],
- selectedValue:'1',
- attrValueStatus:[true,true,true]
- }
- console.log(e.currentTarget.dataset);
- */
- var attrValueList = this.data.attrValueList;
- var index = e.currentTarget.dataset.index;//属性索引
- var key = e.currentTarget.dataset.key;
- var value = e.currentTarget.dataset.value;
- if (e.currentTarget.dataset.status || index == this.data.firstIndex) {
- if (e.currentTarget.dataset.selectedvalue == e.currentTarget.dataset.value) {
- // 取消选中
- this.disSelectValue(attrValueList, index, key, value);
- } else {
- // 选中
- this.selectValue(attrValueList, index, key, value);
- }
- }
- },
- /* 选中 */
- selectValue: function (attrValueList, index, key, value, unselectStatus) {
- // console.log('firstIndex', this.data.firstIndex);
- var includeGroup = [];
- if (index == this.data.firstIndex && !unselectStatus) { // 如果是第一个选中的属性值,则该属性所有值可选
- var commodityAttr = this.data.commodityAttr;
- // 其他选中的属性值全都置空
- // console.log('其他选中的属性值全都置空', index, this.data.firstIndex, !unselectStatus);
- for (var i = 0; i < attrValueList.length; i++) {
- for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
- attrValueList[i].selectedValue = '';
- }
- }
- } else {
- var commodityAttr = this.data.includeGroup;
- }
- // console.log('选中', commodityAttr, index, key, value);
- for (var i = 0; i < commodityAttr.length; i++) {
- for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) {
- if (commodityAttr[i].attrValueList[j].attrKey == key && commodityAttr[i].attrValueList[j].attrValue == value) {
- includeGroup.push(commodityAttr[i]);
- }
- }
- }
- attrValueList[index].selectedValue = value;
- // 判断属性是否可选
- for (var i = 0; i < attrValueList.length; i++) {
- for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
- attrValueList[i].attrValueStatus[j] = false;
- }
- }
- for (var k = 0; k < attrValueList.length; k++) {
- for (var i = 0; i < includeGroup.length; i++) {
- for (var j = 0; j < includeGroup[i].attrValueList.length; j++) {
- if (attrValueList[k].attrKey == includeGroup[i].attrValueList[j].attrKey) {
- for (var m = 0; m < attrValueList[k].attrValues.length; m++) {
- if (attrValueList[k].attrValues[m] == includeGroup[i].attrValueList[j].attrValue) {
- attrValueList[k].attrValueStatus[m] = true;
- }
- }
- }
- }
- }
- }
- // console.log('结果', attrValueList);
- this.setData({
- attrValueList: attrValueList,
- includeGroup: includeGroup
- });
- var count = 0;
- for (var i = 0; i < attrValueList.length; i++) {
- for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
- if (attrValueList[i].selectedValue) {
- count++;
- break;
- }
- }
- }
- if (count < 2) {// 第一次选中,同属性的值都可选
- this.setData({
- firstIndex: index
- });
- } else {
- this.setData({
- firstIndex: -1
- });
- }
- },
- /* 取消选中 */
- disSelectValue: function (attrValueList, index, key, value) {
- var commodityAttr = this.data.commodityAttr;
- attrValueList[index].selectedValue = '';
- // 判断属性是否可选
- for (var i = 0; i < attrValueList.length; i++) {
- for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
- attrValueList[i].attrValueStatus[j] = true;
- }
- }
- this.setData({
- includeGroup: commodityAttr,
- attrValueList: attrValueList
- });
- for (var i = 0; i < attrValueList.length; i++) {
- if (attrValueList[i].selectedValue) {
- this.selectValue(attrValueList, i, attrValueList[i].attrKey, attrValueList[i].selectedValue, true);
- }
- }
- },
- /* 点击确定 */
- submit: function () {
- var value = [];
- for (var i = 0; i < this.data.attrValueList.length; i++) {
- if (!this.data.attrValueList[i].selectedValue) {
- break;
- }
- value.push(this.data.attrValueList[i].selectedValue);
- }
- if (i < this.data.attrValueList.length) {
- wx.showToast({
- title: '请完善属性',
- icon: 'loading',
- duration: 1000
- })
- } else {
- wx.showToast({
- title: '选择的属性:' + value.join('-'),
- icon: 'sucess',
- duration: 1000
- })
- }
- }
- })
3.页面布局
broadcast.wxml
- <!--pages/broadcast/broadcast.wxml-->
- <view class="title">商品属性值联动选择</view>
- <!--options-->
- <view class="commodity_attr_list">
- <!--每组属性-->
- <view class="attr_box" wx:for="{{attrValueList}}" wx:for-item="attrValueObj" wx:for-index="attrIndex" wx:key="id">
- <!--属性名-->
- <view class="attr_name">{{attrValueObj.attrKey}}</view>
- <!--属性值-->
- <view class="attr_value_box">
- <!--每个属性值-->
- <view class="attr_value {{attrIndex==firstIndex || attrValueObj.attrValueStatus[valueIndex]?(value==attrValueObj.selectedValue?'attr_value_active':''):'attr_value_disabled'}}" bindtap="selectAttrValue" data-status="{{attrValueObj.attrValueStatus[valueIndex]}}"
- data-value="{{value}}" data-key="{{attrValueObj.attrKey}}" data-index="{{attrIndex}}" data-selectedvalue="{{attrValueObj.selectedValue}}" wx:for="{{attrValueObj.attrValues}}" wx:for-item="value" wx:for-index="valueIndex" wx:key="id">{{value}}</view>
- </view>
- </view>
- </view>
- <!--button-->
- <view class="weui-btn-area">
- <button class="weui-btn" type="primary" bindtap="submit">确定</button>
- </view>
4.样式
broadcast.wxss
- /* pages/broadcast/broadcast.wxss */
- .title {
- padding: 10rpx 20rpx;
- margin: 10rpx 0;
- border-left: 4rpx solid #ccc;
- }
- /*全部属性的主盒子*/
- .commodity_attr_list {
- background: #fff;
- padding: 0 20rpx;
- font-size: 26rpx;
- overflow: hidden;
- width: 100%;
- }
- /*每组属性的主盒子*/
- .attr_box {
- width: 100%;
- overflow: hidden;
- border-bottom: 1rpx solid #ececec;
- }
- /*属性名*/
- .attr_name {
- width: 20%;
- float: left;
- padding: 15rpx 0;
- }
- /*属性值*/
- .attr_value_box {
- width: 80%;
- float: left;
- padding: 15rpx 0;
- overflow: hidden;
- }
- /*每个属性值*/
- .attr_value {
- float: left;
- padding: 0 10rpx;
- margin: 0 10rpx;
- border: 1rpx solid #ececec;
- }
- /*每个属性选中的当前样式*/
- .attr_value_active {
- background: #FFCC00;
- border-radius: 10rpx;
- color: #fff;
- padding: 0 10rpx;
- }
- /*禁用属性*/
- .attr_value_disabled {
- color: #ccc;
- }
- /*button*/
- .btn-area {
- margin: 1.17647059em 15px 0.3em;
- }
- .btn {
- margin-top: 15px;
- background-color:#FFCC00;
- color: #fff;
- }
- .btn:first-child {
- margin-top: 0;
- }
5.效果图
微信小程序之 Classify(商品属性分类)的更多相关文章
- 微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法
微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法 具体情况: scroll-view 滚动,设置 display:flex 不生效并警告设置 enable-fl ...
- 微信小程序 input 的 type属性 text、number、idcard、digit 区别
微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...
- 微信小程序 | app.json配置属性
app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. widows: 用于设置小程序的状态栏.导航条.标题.窗口背景色. navig ...
- 微信小程序 input组件type属性3个值的作用
input组件是小程序的内容输入框组件,通常是这样来使用的: <input type="text" placeholder="输入点内容吧" /> ...
- 微信小程序 wxml中的属性记录
1. view 标签中的属性 style 中的参数 margin-top:10px; (向上距离) display : flex; (display : flex 容器声明) flex-direc ...
- 微信小程序 - scroll-view的scroll-into-view属性 - 在页面打开后滚动到指定的项
需求: 这是一个可横向滚动的导航条,现在要求我,从别的页面reLaunch回到首页这里,刷新页面内容的同时,菜单项要滚动出来 (如果该菜单项不在可视区域),而不是让他被挡住. 代码:<scrol ...
- 微信小程序 拼团商品倒计时(拼团列表、拼团商品详情)
直接上图: 拼团列表.拼团详情-倒计时 //单个倒计时,适用用于单个商品的倒计时 js文件: //倒计时 function cou ...
- 微信小程序wepy开发,属性绑定的事件参数中可以使用{{}}写实参
<view wx:for="{{tablist}}" class="item {{activeid === item.id ? 'active':''}}" ...
- 微信小程序--flex常用的属性
Flex布局 display:flex 指定当前盒子为伸缩盒 flex-direction:column 把盒子内容垂直从上往下排列 row 把盒子内容垂直从左往右排列 flex-wrap: wrap ...
随机推荐
- C语言中函数参数传递的本质是值传递
数组名做函数参数进行传递时,实际上是是一份该指针的拷贝. 给形参赋予其他值,并不影响实参的值. 类似于: int *p = a; //a为数组名 p = b; //b为数组名 ...
- vue获取v-model数据类型boolean改变成string
问题描述 今天产品问我一线上bug,怎么radio类型改不了 问题分析 看代码,之前的哥们儿是怎么写的 //页面 <div class="ui-form-box"> & ...
- 遇到的django问题
问题1: No migrations to apply 删除了migrations中0001_initial.py文件,重新执行 python manage.py makemigrations pyt ...
- JS 手机号中间4位变星号
一:正则方法 var str1 = '13991367972'var reg = /^(\d{3})\d*(\d{4})$/;var str2 = str1.replace(reg,'$1****$2 ...
- 查询mysql所有表数据、字段信息
根据库名获取所有表的信息 SELECT * FROM information_schema.`TABLES` WHERE TABLE_SCHEMA = 'erp'; 根据库名获取所有表名称和表说明 S ...
- 【实验吧】Just Click
拿到答案需要正确地点击按钮 格式:simCTF{ } 解题链接: http://ctf5.shiyanbar.com/re/rev4.exe 由于最近在学数据库是c#编程,发现是c#,于是用.net ...
- playbacktask
/ ** 播放应用程序的头文件. 此文件是头文件,用于定义Playback应用程序的API和数据类型. @file PlaybackTsk.h @ingroup mIAPPPlay @note什么都没 ...
- hadoop上传文件报错
19/06/06 16:09:26 INFO hdfs.DFSClient: Exception in createBlockOutputStream java.io.IOException: Bad ...
- luogu3168 [CQOI2015]任务查询系统
树状数组不用动脑子真爽啊 #include <algorithm> #include <iostream> #include <cstdio> using name ...
- sql通配符+sql中查询条件包含下划线等通配符的写法
一.SQL 通配符 在搜索数据库中的数据时,SQL 通配符可以替代一个或多个字符. SQL 通配符必须与 LIKE 运算符一起使用. 在 SQL 中,可使用以下通配符: 通配符 描述 % 替代一个或多 ...