商品列表选择尺寸和颜色高亮，并且把选择的数据传递到下一个页面

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

需求：商品列表选择属性，给中的属性显示高亮，并且把选择的数据记录下来传递到下一个页面。

项目下载地址：点击去下载

效果图：

选择商品的属性会显示在下面的选择，点击去体验就把数据传给下一个页面

实现代码：

<!--index.wxml-->
<view class='userAvatarUrl'>
<open-data type="userAvatarUrl"></open-data></view>
<view class='userNickName'>
<open-data type="userNickName"></open-data></view>
<image class='search_icon' src='/img/search.png'></image>
<input class='search' placeholder-class='p_search' confirm-type='search' bindconfirm='search' bindinput='input_search' placeholder='商品搜索'></input>
<view class="centent" wx:for='{{list}}' wx:for-index='inx' wx:key=''><view><image class='img' src='/img/card.png'></image></view><view class='detail'><view>货号:{{item.id}}</view><view class='ddd'>尺寸:<view wx:for='{{item.size}}' wx:key=''><text catchtap='click_size' style='background:{{item.status?"bisque":"#f2f2f2"}}' data-list_idx='{{inx}}' data-idx='{{index}}' data-item='{{item.txt}}'>{{item.txt}}</text></view></view><view class='ddd'>颜色:<view wx:for='{{item.color}}' wx:key=''><text catchtap='click_color' style='background:{{item.status?"bisque":"#f2f2f2"}}' data-list_idx='{{inx}}'  data-idx='{{index}}' data-item='{{item.txt}}'>{{item.txt}}</text></view></view><view style='margin-top:20rpx'wx:if='{{item.sizeTxt}}'>选择:{{item.sizeTxt}},{{item.colorTxt}}</view><view style='margin-top:20rpx'wx:else>选择:</view></view><view class='btn' catchtap='to_nav' data-item='{{item}}'>去体验</view>
</view>

//index.js
//获取应用实例
const app = getApp()Page({data: {list: [{id: 'A02',color: [{status: false,txt: '粉色'}, {status: false,txt: '蓝色'}, {status: false,txt: '紫色'}],size: [{status: false,txt: '11'}, {status: false,txt: '22'}, {status: false,txt: '33'}]}, {id: 'A03',color: [{status: false,txt: '粉色'}, {status: false,txt: '蓝色'}, {status: false,txt: '紫色'}],size: [{status: false,txt: '11'}, {status: false,txt: '22'}, {status: false,txt: '33'}]}, {id: 'A04',color: [{status: false,txt: '粉色'}, {status: false,txt: '蓝色'}, {status: false,txt: '紫色'}],size: [{status: false,txt: '11'}, {status: false,txt: '22'}, {status: false,txt: '33'}]}, {id: 'A05',color: [{status: false,txt: '粉色'}, {status: false,txt: '蓝色'}, {status: false,txt: '紫色'}],size: [{status: false,txt: '11'}, {status: false,txt: '22'}, {status: false,txt: '33'}]}, {id: 'A06',color: [{status: false,txt: '粉色'}, {status: false,txt: '蓝色'}, {status: false,txt: '紫色'}],size: [{status: false,txt: '11'}, {status: false,txt: '22'}, {status: false,txt: '33'}]}]},to_nav(e) {var item = e.currentTarget.dataset.item;wx.navigateTo({url: '../logs/logs?obj='+JSON.stringify(item),})},//事件处理函数click_size: function(e) {console.log(e)var idx1 = e.currentTarget.dataset.idx;var item1 = e.currentTarget.dataset.item;var list_idx = e.currentTarget.dataset.list_idx;var list = this.data.list;var list_item;console.log('item', list_idx)list_item = list[list_idx].sizelist_item.forEach((item_list_item, index_list_item) => {this.setData({['list[' + list_idx + '].size[' + index_list_item + '].status']: false,})})this.setData({['list[' + list_idx + '].sizeTxt']: item1,['list[' + list_idx + '].size[' + idx1 + '].status']: true,})},//事件处理函数click_color: function (e) {console.log(e)var idx1 = e.currentTarget.dataset.idx;var item1 = e.currentTarget.dataset.item;var list_idx = e.currentTarget.dataset.list_idx;var list = this.data.list;var list_item;console.log('item', list_idx)list_item = list[list_idx].colorlist_item.forEach((item_list_item, index_list_item) => {this.setData({['list[' + list_idx + '].colorTxt']: item1,['list[' + list_idx + '].color[' + index_list_item + '].status']: false,})})this.setData({['list[' + list_idx + '].color[' + idx1 + '].status']: true,})},onLoad: function() {}
})

css

/**index.wxss**/
.userAvatarUrl{width: 80rpx;height: 80rpx;position: relative;left: 500rpx;top: 10rpx;
}
.userNickName{position: absolute;left: 600rpx;width: 80rpx;top: 20rpx;height: 80rpx;
}
page{background: #F7F7F7;font-size: 32rpx;
}
.search_icon{position: absolute;right: 86rpx;width: 34rpx;height: 34rpx;margin-top: 56rpx;
}
.search{background: white;margin: 0;margin-left: 4%;padding-left: 3%;margin-top: 30rpx;height: 84rpx;border-radius: 10rpx;width: 86%;
}
.p_search{margin-left:12rpx;
}.centent{position: relative;display: flex;flex-direction: row;background: white;margin: 40rpx;padding: 20rpx;
}
.ddd{display: flex;flex-direction: row;margin-top: 10rpx;
}
.img{width: 160rpx;height: 160rpx;margin-top: 20rpx
}
.detail{margin-left: 20rpx;
}
text{margin-left: 20rpx;padding: 0 10rpx 0 10rpx;background: #f2f2f2;
}
.btn{padding:  0 10rpx 0 10rpx;border: 1px solid #d0d0d0;height: 50rpx;line-height: 50rpx;position: absolute;bottom: 20rpx;right: 20rpx;
}

下一个页面接收的js

//logs.js
Page({onLoad: function (e) {var obj = JSON.parse(e.obj)this.setData({...obj})}
})

下一个页面接收的页面

<!--logs.wxml-->
<view class="container log-list">
size:{{sizeTxt}}
</view>
<view class="container log-list">
color:{{colorTxt}}
</view>
<view class="container log-list">
货号:{{id}}
</view>

商品列表选择尺寸和颜色高亮，并且把选择的数据传递到下一个页面相关推荐

【uniapp前端组件】仿美团外卖商品列表
仿美团外卖商品列表简易实现美团外卖商品列表,没什么技术难点,简单来说就是两个scroll-view协作,并且两个scroll-view不会滑动冲突. 实际效果仿美团外卖商品列表实际项目效果简介 ...
框架 day74 涛涛商城项目整合ssm,分页插件pagehelper,商品列表查询
讲师:入云龙 1. 课程计划 1. SSM框架整合 2. mybatis逆向工程 3. 商品列表 4. 商品列表分页处理 2. SSM框架整合 2.1. 后台系统所用的技术框架:Spring ...
python从零学习：商品列表及购物清单
噔噔噔呛! 时隔n久继续学习Python,现在跟着bilibili上的课程学到列表了,还学了元组和字典啥的,然后我就来写下小作业,请多赐教! 作业概述: 1.现有商品列表如下: products=[[ ...
微信小程序中商品列表不显示
在做这个商品列表的时候不显示图片,这是我在网上找的一个案例,把它的样式复制过来后不显示,经过查找是根目录的这个种的continer跟他的样式重叠改成就好了,如果需要这个功能的这个项目地址(仿美团) ...
网站建设：颜色与线条的选择
网站类型不同,设计时所使用的颜色也会不同,而且颜色直接影响着人们的感受,科泉网络经过调查发现,红色系标志着剧烈.兴奋,灰色系标志着平平和低沉.旅行和园林类型的网站运用绿色系比较多,蓝色则被誉为是公司色 ...
QlikView线图高亮选择尺寸
作为标题,如今,学生问我一个问题.尺寸Month.expression它是Count(Id). 这个图是一个折线图,不管你选择哪个月的其他下拉列表,销售量.由于Expression里面是这样写的 Co ...
根据上面的products列表写一个循环，不断询问用户想买什么，用户选择一个商品编号，就把对应的商品添加到购物车里，终用户输入q退出时，打印购买的商品列表。
一.问题: 现有商品列表如下: 1.products = [["iphone",6888],["MacPro",14800],["小米6", ...
写一个循环，不断的问用户想买什么，用户选择一个商品编号，就把对应的商品添加到购物车里，最终用户输入q退出时，打印购物车里的商品列表
写一个循环,不断的问用户想买什么,用户选择一个商品编号,就把对应的商品添加到购物车里,最终用户输入q退出时,打印购物车里的商品列表写一个循环,不断的问用户想买什么,用户选择一个商品编号,就把对应的商 ...
CSDN-markdown 文字样式设置（字体, 大小, 颜色, 高亮底色）与数学表达式设置
文字样式1(内嵌HTML) Size:规定文本的尺寸大小,取值从 1 到 7 ,浏览器默认值是 3. <font face="黑体">我是黑体字</font> ...

商品列表选择尺寸和颜色高亮，并且把选择的数据传递到下一个页面

承接微信小程序开发。扫码加微信。

商品列表选择尺寸和颜色高亮，并且把选择的数据传递到下一个页面相关推荐

最新文章

热门文章