微信小程序select组件不能使用，如何实现同样的效果
点击联系发帖人
时间：2018-05-26 10:35
没有更多推荐了，
不良信息举报
举报内容：
微信小程序，一个有局限的类似 React Native 轮子
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！为什么部分微信小程序可以实现模糊搜索，部分需要精准搜索？为什么不能通过长按识别二维码的方式进入小程序？ - 知乎87被浏览<strong class="NumberBoard-itemValue" title="2分享邀请回答134 条评论分享收藏感谢收起31 条评论分享收藏感谢收起微信小程序实战篇：商品属性联动选择（案例） - 简书
微信小程序实战篇：商品属性联动选择（案例）
微信小程序.jpg
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果，素材参考了一点点奶茶。
效果演示：
商品属性联动.gif
1、commodity.xml
&!-- &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"&
&!--属性名--&
&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-code="{{attrCode}}" data-index="{{attrIndex}}" data-selectedvalue="{{attrValueObj.selectedValue}}" wx:for="{{attrValueObj.attrValues}}" wx:for-item="value" wx:for-index="valueIndex"&{{value}}&/view&
&!--button--&
&view class="weui-btn-area"&
&button class="weui-btn" bindtap="submit"&选好了
上述代码把页面盒子分为两部分commodity_attr_list和weui-btn-area。
commodity_attr_list：循环获取商品的属性名和相对应的属性值，并布局页面。
weui-btn-area：提交校验并获取选中商品属性结果。
2、commodity.js
//数据结构：以一组一组的数据来进行设定
commodityAttr: [
priceId: 1,
price: 35.0,
"stock": 8,
"attrValueList": [
"attrKey": "规格：",
"attrValue": "+免费配料",
"attrCode": "1001"
"attrKey": "甜度：",
"attrValue": "七分甜",
"attrCode": "2001"
"attrKey": "加料：",
"attrValue": "珍珠",
"attrCode": "3001"
"attrKey": "冰块：",
"attrValue": "少冰",
"attrCode": "4001"
priceId: 2,
price: 35.1,
"stock": 9,
"attrValueList": [
"attrKey": "规格：",
"attrValue": "+燕麦",
"attrCode": "1002"
"attrKey": "甜度：",
"attrValue": "五分甜",
"attrCode": "2002"
"attrKey": "加料：",
"attrValue": "椰果",
"attrCode": "3002"
"attrKey": "冰块：",
"attrValue": "去冰",
"attrCode": "4002"
priceId: 3,
price: 35.2,
"stock": 10,
"attrValueList": [
"attrKey": "规格：",
"attrValue": "+布丁",
"attrCode": "1003"
"attrKey": "甜度：",
"attrValue": "无糖",
"attrCode": "2003"
"attrKey": "加料：",
"attrValue": "仙草",
"attrCode": "3003"
"attrKey": "冰块：",
"attrValue": "常温",
"attrCode": "4003"
priceId: 4,
price: 35.2,
"stock": 10,
"attrValueList": [
"attrKey": "规格：",
"attrValue": "再加一份奶霜",
"attrCode": "1004"
"attrKey": "甜度：",
"attrValue": "无糖",
"attrCode": "2003"
"attrKey": "加料：",
"attrValue": "仙草",
"attrCode": "3004"
"attrKey": "冰块：",
"attrValue": "热饮",
"attrCode": "4004"
priceId: 5,
price: 35.2,
"stock": 10,
"attrValueList": [
"attrKey": "规格：",
"attrValue": "+免费配料",
"attrCode": "1004"
"attrKey": "甜度：",
"attrValue": "五分甜",
"attrCode": "2003"
"attrKey": "加料：",
"attrValue": "椰果",
"attrCode": "3004"
"attrKey": "冰块：",
"attrValue": "常温",
"attrCode": "4004"
attrValueList: []
属性选中和取消选择效果处理
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. i++) {
this.data.attrValueList[i].selectedValue = this.data.commodityAttr[0].attrValueList[i].attrV
this.setData({
attrValueList: this.data.attrValueList
/* 获取数据 */
distachAttrValue: function (commodityAttr) {
将后台返回的数据组合成类似
attrKey:'型号',
attrValueList:['1','2','3']
// 把数据对象的数据（视图使用），写到局部内
var attrValueList = this.data.attrValueL
// 遍历获取的数据
for (var i = 0; i & commodityAttr. i++) {
for (var j = 0; j & commodityAttr[i].attrValueList. 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);
attrValueList.push({
attrKey: commodityAttr[i].attrValueList[j].attrKey,
attrValues: [commodityAttr[i].attrValueList[j].attrValue]
// console.log('result', attrValueList)
for (var i = 0; i & attrValueList. i++) {
for (var j = 0; j & attrValueList[i].attrValues. j++) {
if (attrValueList[i].attrValueStatus) {
attrValueList[i].attrValueStatus[j] =
attrValueList[i].attrValueStatus = [];
attrValueList[i].attrValueStatus[j] =
this.setData({
attrValueList: attrValueList
getAttrIndex: function (attrName, attrValueList) {
// 判断数组中的attrKey是否有该属性值
for (var i = 0; i & attrValueList. i++) {
if (attrName == attrValueList[i].attrKey) {
return i & attrValueList.length ? i : -1;
isValueExist: function (value, valueArr) {
// 判断是否已有属性值
for (var i = 0; i & valueArr. i++) {
if (valueArr[i] == value) {
return i & valueArr.
/* 选择属性值事件 */
selectAttrValue: function (e) {
点选属性值，联动判断其他属性值是否可选
attrKey:'型号',
attrValueList:['1','2','3'],
selectedValue:'1',
attrValueStatus:[true,true,true]
console.log(e.currentTarget.dataset);
var attrValueList = this.data.attrValueL
var index = e.currentTarget.dataset.//属性索引
var key = e.currentTarget.dataset.
var value = e.currentTarget.dataset.
if (e.currentTarget.dataset.status || index == this.data.firstIndex) {
if (e.currentTarget.dataset.selectedvalue == e.currentTarget.dataset.value) {
// 取消选中
this.disSelectValue(attrValueList, index, key, value);
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.commodityA
// 其他选中的属性值全都置空
// console.log('其他选中的属性值全都置空', index, this.data.firstIndex, !unselectStatus);
for (var i = 0; i & attrValueList. i++) {
for (var j = 0; j & attrValueList[i].attrValues. j++) {
attrValueList[i].selectedValue = '';
var commodityAttr = this.data.includeG
// console.log('选中', commodityAttr, index, key, value);
for (var i = 0; i & commodityAttr. i++) {
for (var j = 0; j & commodityAttr[i].attrValueList. j++) {
if (commodityAttr[i].attrValueList[j].attrKey == key && commodityAttr[i].attrValueList[j].attrValue == value) {
includeGroup.push(commodityAttr[i]);
attrValueList[index].selectedValue =
// 判断属性是否可选
for (var i = 0; i & attrValueList. i++) {
for (var j = 0; j & attrValueList[i].attrValues. j++) {
attrValueList[i].attrValueStatus[j] =
for (var k = 0; k & attrValueList. k++) {
for (var i = 0; i & includeGroup. i++) {
for (var j = 0; j & includeGroup[i].attrValueList. j++) {
if (attrValueList[k].attrKey == includeGroup[i].attrValueList[j].attrKey) {
for (var m = 0; m & attrValueList[k].attrValues. m++) {
if (attrValueList[k].attrValues[m] == includeGroup[i].attrValueList[j].attrValue) {
attrValueList[k].attrValueStatus[m] =
// console.log('结果', attrValueList);
this.setData({
attrValueList: attrValueList,
includeGroup: includeGroup
var count = 0;
for (var i = 0; i & attrValueList. i++) {
for (var j = 0; j & attrValueList[i].attrValues. j++) {
if (attrValueList[i].selectedValue) {
if (count & 2) {// 第一次选中，同属性的值都可选
this.setData({
firstIndex: index
this.setData({
firstIndex: -1
/* 取消选中 */
disSelectValue: function (attrValueList, index, key, value) {
var commodityAttr = this.data.commodityA
attrValueList[index].selectedValue = '';
// 判断属性是否可选
for (var i = 0; i & attrValueList. i++) {
for (var j = 0; j & attrValueList[i].attrValues. j++) {
attrValueList[i].attrValueStatus[j] =
this.setData({
includeGroup: commodityAttr,
attrValueList: attrValueList
for (var i = 0; i & attrValueList. 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. i++) {
if (!this.data.attrValueList[i].selectedValue) {
value.push(this.data.attrValueList[i].selectedValue);
if (i & this.data.attrValueList.length) {
wx.showToast({
title: '请选择完整！',
icon: 'loading',
duration: 1000
var valueStr = "";
for(var i = 0;i & value.i++){
console.log(value[i]);
valueStr += value[i]+",";
wx.showModal({
title: '提示',
content: valueStr,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
console.log(valueStr);
3、commodity.wxss
padding: 10rpx 20
margin: 10rpx 0;
border-left: 4rpx solid #
/*全部属性的主盒子*/
.commodity_attr_list {
background: #
padding: 0 20
font-size: 26
width: 100%;
/*每组属性的主盒子*/
.attr_box {
width: 100%;
border-bottom: 1rpx solid #
flex-direction:
/*属性名*/
.attr_name {
width: 20%;
padding: 15rpx 0;
/*属性值*/
.attr_value_box {
width: 80%;
padding: 15rpx 0;
/*每个属性值*/
.attr_value {
padding: 0 30
margin: 10rpx 10
border: 1rpx solid #
border-radius:5
line-height:30
/*每个属性选中的当前样式*/
.attr_value_active {
border-radius: 10
color: #0089
padding: 0 30
border: 1rpx solid #0089
/* background: #
/*禁用属性*/
.attr_value_disabled {
/*button*/
.weui-btn-area {
margin: 1.em 15px 0.3
.weui-btn{
width: 80%;
height: 100
border-radius: 3
background-color:#0089
好了，复制上述代码就可以实现效果哦，赶紧试试吧！
更多精彩内容
如果需要源码可以关注“IT实战联盟”公众号并留言（源码名称+邮箱），小萌看到后会联系作者发送到邮箱，也可以加入交流群和作者互撩哦~~~
IT实战联盟.jpg
IT实战联盟Lin，联盟主旨是集产品、UI设计、前后端、架构、大数据和AI人工智能等为一体的实战交流服务平台！联盟嘉宾都为各互联网公司项目的核心成员，联盟主旨是“让实战更简单”，欢迎关注“IT实战联盟”公众号来撩~~~
百战程序员_ Java1573题 QQ群：034603 掌握80%年薪20万掌握50%年薪10万 全程项目穿插, 从易到难，含17个项目视频和资料持续更新，请关注www.itbaizhan.com 国内最牛七星级团队马士兵、高淇等11位十年开发经验专...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
pdf下载地址：Java面试宝典 第一章内容介绍 20 第二章JavaSE基础 21 一、Java面向对象 21 1. 面向对象都有哪些特性以及你对这些特性的理解 21 2. 访问权限修饰符public、private、protected, 以及不写（默认）时的区别(201...
刚刚结束了项目期，最近对ecshop用的也算比较熟了，所以给大家分享出来，如果不是一定要用ecshop大家最好还是用其他框架。讲真，ecshop真心不是很好用，可扩展性还特别小（新版本）。 要想配置一个框架，需先了解结构，所以上篇先讲结构 一、文件夹功能说明 1.根目录：所...
每当快到周末，闺女都很高兴，因为不必一放学就急着写作业，可以轻松的玩一会了。
这不，今天我接她放学后还是把她带到了我们学校，不同的是今天不用在我办公室写她的作业了，而是跑到操场跟我同事家的孩子——她的小闺蜜蓓蓓一起疯玩了一阵，我满脸笑容的看着她在操场上自由无拘的...
当今社会的竞争压力非常的，随着高科的发展，许多行业被淘汰了，那是因为什么?就是因为他们没有自身的实力，或是不懂得与时俱进，所以在同行的竞争中，被逐出了市场。对于人们而言，也是一样的。如果你没有自身的能力，不求上进，那么你也将会很艰难地在这个社会中生存。 从目前的发展来说，就...
我年轻时所见的人，只掌握了一些粗浅（且不说是荒谬）的原则，就以为无所不知，对世界妄加判断，结果整个世界都深受其害。 真正的君子知道，自己的见解受所处环境左右，未必是公平的；所以他觉得明辨是非是难的。倘若某人以为自己是社会的精英，以为自己的见解一定对，虽然有狂妄之嫌，但他会觉...
来吧 第一张通缉令 改的面目全非 但也是自己的作品哈哈 第二张 更新了两张半 凑齐可以召唤神龙嘛？
Flavor F, focus,关注。要时刻关注客户体验链。客户体验链包括本人，本人提供的产品及服务，客户得到的体验。 L，long-term，长期。长期关注客户体验链，保持初心。 A，authentic，真实。要保持真我，不要妄图金玉其外，败絮其中，欺骗客户，客户远比你想...微信小程序关于联动选择器如何使用
本文主要和大家分享了微信小程序联动选择器使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
利用微信小程序的picker组件，其中：
1，普通选择器：mode = selector实现一级选择实例；
2，省市区选择器：mode = region实现省市区联动；
3， 多列选择器：mode = multiSelector实现二级和联动的10以内数字的乘法。
&view class=&tui-picker-content&& &view class=&tui-picker-name&&一级选择实例&/view& &picker bindchange=&changeCountry& value=&{{countryIndex}}& range=&{{countryList}}&& &view class=&tui-picker-detail&&{{countryList[countryIndex]}}&/view& &/picker& &/view& &view class=&tui-picker-content&& &view class=&tui-picker-name&&省市区联动选择&/view& &picker bindchange=&changeRegin& mode = ®ion& value=&{{region}}&& &view class=&tui-picker-detail&&{{region[0]}} - {{region[1]}} - {{region[2]}}&/view& &/picker& &/view& &view class=&tui-picker-content&& &view class=&tui-picker-name&&自定义二级联动选择&/view& &picker bindchange=&changeMultiPicker& mode = &multiSelector& value=&{{multiIndex}}& range=&{{multiArray}}&& &view class=&tui-picker-detail&& {{multiArray[0][multiIndex[0]]}} * {{multiArray[1][multiIndex[1]]}} = {{multiArray[0][multiIndex[0]] * multiArray[1][multiIndex[1]]}} &/view& &/picker& &/view& &view class=&tui-picker-content&& &view class=&tui-picker-name&&自定义联动选择&/view& &picker bindchange=&changeMultiPicker3& mode = &multiSelector& value=&{{multiIndex3}}& range=&{{multiArray3}}&& &view class=&tui-picker-detail&& {{multiArray3[0][multiIndex3[0]]}} * {{multiArray3[1][multiIndex3[1]]}} * {{multiArray3[2][multiIndex3[2]]}} = {{multiArray3[0][multiIndex3[0]] * multiArray3[1][multiIndex3[1]] * multiArray3[2][multiIndex3[2]]}} &/view& &/picker& &/view&
page{ #efeff4;} .tui-picker-content{
30 text-align: } .tui-picker-name{
80 line- 80 } .tui-picker-detail{
80 line- 80
0 10 overflow: }
Page({ data: { // 普通选择器列表设置,及初始化 countryList: ['中国','美国','英国','日本','韩国','巴西',''], countryIndex: 6, // 省市区联动初始化 region: [&四川省&, &广元市&, &苍溪县&], // 多列选择器(二级联动)列表设置,及初始化 multiArray: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9]], multiIndex: [3,5], // 多列选择器(联动)列表设置,及初始化 multiArray3: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9]], multiIndex3: [3, 5, 4] }, // 选择国家函数 changeCountry(e){ this.setData({ countryIndex: e.detail.value}); }, // 选择省市区函数 changeRegin(e){ this.setData({ region: e.detail.value }); }, // 选择二级联动 changeMultiPicker(e) { this.setData({multiIndex: e.detail.value}) }, // 选择联动 changeMultiPicker3(e) { this.setData({ multiIndex3: e.detail.value }) } })
1、由于微信小程序的picker组件只提供单独时间选择器和日期选择器，在实际开发中，我们可能需要同时选择日期和时间，组件不够全面，所以在做日期选择器时，需要注意；
2、解决日期和时间选择器结合的方法，利用多列选择器实现；
3、由于多列选择器的数据采用的是二维数组，所以不能直接实现联动效果，需要对数据判断处理。
合理的利用多列选择器，picker组件提供的其他四种选择器都能实现！
更多精彩内容请关注：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。有没有大神说一下微信小程序吸顶的效果怎么实现啊【程序员吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：118,466贴子：
有没有大神说一下微信小程序吸顶的效果怎么实现啊收藏
有没有大神说一下微信小程序吸顶的效果怎么实现啊
1、整个页面用scroll-view包裹2、获取你要吸顶的元素距离顶部的距离wx.createSelectorQuery().select('#tipBox').boundingClientRect(function(rect){
const maxScroll = rect. }).exec();3、然后用监听滚动事件判断距离，大于maxScroll的时候，就吸顶(让页面的滚动距离固定)；细节方面还有些bug不知道怎么解决，比如滑动速度快的时候。
登录百度帐号}
不良信息举报
举报内容：
微信小程序，一个有局限的类似 React Native 轮子
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！为什么部分微信小程序可以实现模糊搜索，部分需要精准搜索？为什么不能通过长按识别二维码的方式进入小程序？ - 知乎87被浏览<strong class="NumberBoard-itemValue" title="2分享邀请回答134 条评论分享收藏感谢收起31 条评论分享收藏感谢收起微信小程序实战篇：商品属性联动选择（案例） - 简书
微信小程序实战篇：商品属性联动选择（案例）
微信小程序.jpg
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果，素材参考了一点点奶茶。
效果演示：
商品属性联动.gif
1、commodity.xml
&!-- &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"&
&!--属性名--&
&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-code="{{attrCode}}" data-index="{{attrIndex}}" data-selectedvalue="{{attrValueObj.selectedValue}}" wx:for="{{attrValueObj.attrValues}}" wx:for-item="value" wx:for-index="valueIndex"&{{value}}&/view&
&!--button--&
&view class="weui-btn-area"&
&button class="weui-btn" bindtap="submit"&选好了
上述代码把页面盒子分为两部分commodity_attr_list和weui-btn-area。
commodity_attr_list：循环获取商品的属性名和相对应的属性值，并布局页面。
weui-btn-area：提交校验并获取选中商品属性结果。
2、commodity.js
//数据结构：以一组一组的数据来进行设定
commodityAttr: [
priceId: 1,
price: 35.0,
"stock": 8,
"attrValueList": [
"attrKey": "规格：",
"attrValue": "+免费配料",
"attrCode": "1001"
"attrKey": "甜度：",
"attrValue": "七分甜",
"attrCode": "2001"
"attrKey": "加料：",
"attrValue": "珍珠",
"attrCode": "3001"
"attrKey": "冰块：",
"attrValue": "少冰",
"attrCode": "4001"
priceId: 2,
price: 35.1,
"stock": 9,
"attrValueList": [
"attrKey": "规格：",
"attrValue": "+燕麦",
"attrCode": "1002"
"attrKey": "甜度：",
"attrValue": "五分甜",
"attrCode": "2002"
"attrKey": "加料：",
"attrValue": "椰果",
"attrCode": "3002"
"attrKey": "冰块：",
"attrValue": "去冰",
"attrCode": "4002"
priceId: 3,
price: 35.2,
"stock": 10,
"attrValueList": [
"attrKey": "规格：",
"attrValue": "+布丁",
"attrCode": "1003"
"attrKey": "甜度：",
"attrValue": "无糖",
"attrCode": "2003"
"attrKey": "加料：",
"attrValue": "仙草",
"attrCode": "3003"
"attrKey": "冰块：",
"attrValue": "常温",
"attrCode": "4003"
priceId: 4,
price: 35.2,
"stock": 10,
"attrValueList": [
"attrKey": "规格：",
"attrValue": "再加一份奶霜",
"attrCode": "1004"
"attrKey": "甜度：",
"attrValue": "无糖",
"attrCode": "2003"
"attrKey": "加料：",
"attrValue": "仙草",
"attrCode": "3004"
"attrKey": "冰块：",
"attrValue": "热饮",
"attrCode": "4004"
priceId: 5,
price: 35.2,
"stock": 10,
"attrValueList": [
"attrKey": "规格：",
"attrValue": "+免费配料",
"attrCode": "1004"
"attrKey": "甜度：",
"attrValue": "五分甜",
"attrCode": "2003"
"attrKey": "加料：",
"attrValue": "椰果",
"attrCode": "3004"
"attrKey": "冰块：",
"attrValue": "常温",
"attrCode": "4004"
attrValueList: []
属性选中和取消选择效果处理
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. i++) {
this.data.attrValueList[i].selectedValue = this.data.commodityAttr[0].attrValueList[i].attrV
this.setData({
attrValueList: this.data.attrValueList
/* 获取数据 */
distachAttrValue: function (commodityAttr) {
将后台返回的数据组合成类似
attrKey:'型号',
attrValueList:['1','2','3']
// 把数据对象的数据（视图使用），写到局部内
var attrValueList = this.data.attrValueL
// 遍历获取的数据
for (var i = 0; i & commodityAttr. i++) {
for (var j = 0; j & commodityAttr[i].attrValueList. 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);
attrValueList.push({
attrKey: commodityAttr[i].attrValueList[j].attrKey,
attrValues: [commodityAttr[i].attrValueList[j].attrValue]
// console.log('result', attrValueList)
for (var i = 0; i & attrValueList. i++) {
for (var j = 0; j & attrValueList[i].attrValues. j++) {
if (attrValueList[i].attrValueStatus) {
attrValueList[i].attrValueStatus[j] =
attrValueList[i].attrValueStatus = [];
attrValueList[i].attrValueStatus[j] =
this.setData({
attrValueList: attrValueList
getAttrIndex: function (attrName, attrValueList) {
// 判断数组中的attrKey是否有该属性值
for (var i = 0; i & attrValueList. i++) {
if (attrName == attrValueList[i].attrKey) {
return i & attrValueList.length ? i : -1;
isValueExist: function (value, valueArr) {
// 判断是否已有属性值
for (var i = 0; i & valueArr. i++) {
if (valueArr[i] == value) {
return i & valueArr.
/* 选择属性值事件 */
selectAttrValue: function (e) {
点选属性值，联动判断其他属性值是否可选
attrKey:'型号',
attrValueList:['1','2','3'],
selectedValue:'1',
attrValueStatus:[true,true,true]
console.log(e.currentTarget.dataset);
var attrValueList = this.data.attrValueL
var index = e.currentTarget.dataset.//属性索引
var key = e.currentTarget.dataset.
var value = e.currentTarget.dataset.
if (e.currentTarget.dataset.status || index == this.data.firstIndex) {
if (e.currentTarget.dataset.selectedvalue == e.currentTarget.dataset.value) {
// 取消选中
this.disSelectValue(attrValueList, index, key, value);
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.commodityA
// 其他选中的属性值全都置空
// console.log('其他选中的属性值全都置空', index, this.data.firstIndex, !unselectStatus);
for (var i = 0; i & attrValueList. i++) {
for (var j = 0; j & attrValueList[i].attrValues. j++) {
attrValueList[i].selectedValue = '';
var commodityAttr = this.data.includeG
// console.log('选中', commodityAttr, index, key, value);
for (var i = 0; i & commodityAttr. i++) {
for (var j = 0; j & commodityAttr[i].attrValueList. j++) {
if (commodityAttr[i].attrValueList[j].attrKey == key && commodityAttr[i].attrValueList[j].attrValue == value) {
includeGroup.push(commodityAttr[i]);
attrValueList[index].selectedValue =
// 判断属性是否可选
for (var i = 0; i & attrValueList. i++) {
for (var j = 0; j & attrValueList[i].attrValues. j++) {
attrValueList[i].attrValueStatus[j] =
for (var k = 0; k & attrValueList. k++) {
for (var i = 0; i & includeGroup. i++) {
for (var j = 0; j & includeGroup[i].attrValueList. j++) {
if (attrValueList[k].attrKey == includeGroup[i].attrValueList[j].attrKey) {
for (var m = 0; m & attrValueList[k].attrValues. m++) {
if (attrValueList[k].attrValues[m] == includeGroup[i].attrValueList[j].attrValue) {
attrValueList[k].attrValueStatus[m] =
// console.log('结果', attrValueList);
this.setData({
attrValueList: attrValueList,
includeGroup: includeGroup
var count = 0;
for (var i = 0; i & attrValueList. i++) {
for (var j = 0; j & attrValueList[i].attrValues. j++) {
if (attrValueList[i].selectedValue) {
if (count & 2) {// 第一次选中，同属性的值都可选
this.setData({
firstIndex: index
this.setData({
firstIndex: -1
/* 取消选中 */
disSelectValue: function (attrValueList, index, key, value) {
var commodityAttr = this.data.commodityA
attrValueList[index].selectedValue = '';
// 判断属性是否可选
for (var i = 0; i & attrValueList. i++) {
for (var j = 0; j & attrValueList[i].attrValues. j++) {
attrValueList[i].attrValueStatus[j] =
this.setData({
includeGroup: commodityAttr,
attrValueList: attrValueList
for (var i = 0; i & attrValueList. 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. i++) {
if (!this.data.attrValueList[i].selectedValue) {
value.push(this.data.attrValueList[i].selectedValue);
if (i & this.data.attrValueList.length) {
wx.showToast({
title: '请选择完整！',
icon: 'loading',
duration: 1000
var valueStr = "";
for(var i = 0;i & value.i++){
console.log(value[i]);
valueStr += value[i]+",";
wx.showModal({
title: '提示',
content: valueStr,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
console.log(valueStr);
3、commodity.wxss
padding: 10rpx 20
margin: 10rpx 0;
border-left: 4rpx solid #
/*全部属性的主盒子*/
.commodity_attr_list {
background: #
padding: 0 20
font-size: 26
width: 100%;
/*每组属性的主盒子*/
.attr_box {
width: 100%;
border-bottom: 1rpx solid #
flex-direction:
/*属性名*/
.attr_name {
width: 20%;
padding: 15rpx 0;
/*属性值*/
.attr_value_box {
width: 80%;
padding: 15rpx 0;
/*每个属性值*/
.attr_value {
padding: 0 30
margin: 10rpx 10
border: 1rpx solid #
border-radius:5
line-height:30
/*每个属性选中的当前样式*/
.attr_value_active {
border-radius: 10
color: #0089
padding: 0 30
border: 1rpx solid #0089
/* background: #
/*禁用属性*/
.attr_value_disabled {
/*button*/
.weui-btn-area {
margin: 1.em 15px 0.3
.weui-btn{
width: 80%;
height: 100
border-radius: 3
background-color:#0089
好了，复制上述代码就可以实现效果哦，赶紧试试吧！
更多精彩内容
如果需要源码可以关注“IT实战联盟”公众号并留言（源码名称+邮箱），小萌看到后会联系作者发送到邮箱，也可以加入交流群和作者互撩哦~~~
IT实战联盟.jpg
IT实战联盟Lin，联盟主旨是集产品、UI设计、前后端、架构、大数据和AI人工智能等为一体的实战交流服务平台！联盟嘉宾都为各互联网公司项目的核心成员，联盟主旨是“让实战更简单”，欢迎关注“IT实战联盟”公众号来撩~~~
百战程序员_ Java1573题 QQ群：034603 掌握80%年薪20万掌握50%年薪10万 全程项目穿插, 从易到难，含17个项目视频和资料持续更新，请关注www.itbaizhan.com 国内最牛七星级团队马士兵、高淇等11位十年开发经验专...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
pdf下载地址：Java面试宝典 第一章内容介绍 20 第二章JavaSE基础 21 一、Java面向对象 21 1. 面向对象都有哪些特性以及你对这些特性的理解 21 2. 访问权限修饰符public、private、protected, 以及不写（默认）时的区别(201...
刚刚结束了项目期，最近对ecshop用的也算比较熟了，所以给大家分享出来，如果不是一定要用ecshop大家最好还是用其他框架。讲真，ecshop真心不是很好用，可扩展性还特别小（新版本）。 要想配置一个框架，需先了解结构，所以上篇先讲结构 一、文件夹功能说明 1.根目录：所...
每当快到周末，闺女都很高兴，因为不必一放学就急着写作业，可以轻松的玩一会了。
这不，今天我接她放学后还是把她带到了我们学校，不同的是今天不用在我办公室写她的作业了，而是跑到操场跟我同事家的孩子——她的小闺蜜蓓蓓一起疯玩了一阵，我满脸笑容的看着她在操场上自由无拘的...
当今社会的竞争压力非常的，随着高科的发展，许多行业被淘汰了，那是因为什么?就是因为他们没有自身的实力，或是不懂得与时俱进，所以在同行的竞争中，被逐出了市场。对于人们而言，也是一样的。如果你没有自身的能力，不求上进，那么你也将会很艰难地在这个社会中生存。 从目前的发展来说，就...
我年轻时所见的人，只掌握了一些粗浅（且不说是荒谬）的原则，就以为无所不知，对世界妄加判断，结果整个世界都深受其害。 真正的君子知道，自己的见解受所处环境左右，未必是公平的；所以他觉得明辨是非是难的。倘若某人以为自己是社会的精英，以为自己的见解一定对，虽然有狂妄之嫌，但他会觉...
来吧 第一张通缉令 改的面目全非 但也是自己的作品哈哈 第二张 更新了两张半 凑齐可以召唤神龙嘛？
Flavor F, focus,关注。要时刻关注客户体验链。客户体验链包括本人，本人提供的产品及服务，客户得到的体验。 L，long-term，长期。长期关注客户体验链，保持初心。 A，authentic，真实。要保持真我，不要妄图金玉其外，败絮其中，欺骗客户，客户远比你想...微信小程序关于联动选择器如何使用
本文主要和大家分享了微信小程序联动选择器使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
利用微信小程序的picker组件，其中：
1，普通选择器：mode = selector实现一级选择实例；
2，省市区选择器：mode = region实现省市区联动；
3， 多列选择器：mode = multiSelector实现二级和联动的10以内数字的乘法。
&view class=&tui-picker-content&& &view class=&tui-picker-name&&一级选择实例&/view& &picker bindchange=&changeCountry& value=&{{countryIndex}}& range=&{{countryList}}&& &view class=&tui-picker-detail&&{{countryList[countryIndex]}}&/view& &/picker& &/view& &view class=&tui-picker-content&& &view class=&tui-picker-name&&省市区联动选择&/view& &picker bindchange=&changeRegin& mode = ®ion& value=&{{region}}&& &view class=&tui-picker-detail&&{{region[0]}} - {{region[1]}} - {{region[2]}}&/view& &/picker& &/view& &view class=&tui-picker-content&& &view class=&tui-picker-name&&自定义二级联动选择&/view& &picker bindchange=&changeMultiPicker& mode = &multiSelector& value=&{{multiIndex}}& range=&{{multiArray}}&& &view class=&tui-picker-detail&& {{multiArray[0][multiIndex[0]]}} * {{multiArray[1][multiIndex[1]]}} = {{multiArray[0][multiIndex[0]] * multiArray[1][multiIndex[1]]}} &/view& &/picker& &/view& &view class=&tui-picker-content&& &view class=&tui-picker-name&&自定义联动选择&/view& &picker bindchange=&changeMultiPicker3& mode = &multiSelector& value=&{{multiIndex3}}& range=&{{multiArray3}}&& &view class=&tui-picker-detail&& {{multiArray3[0][multiIndex3[0]]}} * {{multiArray3[1][multiIndex3[1]]}} * {{multiArray3[2][multiIndex3[2]]}} = {{multiArray3[0][multiIndex3[0]] * multiArray3[1][multiIndex3[1]] * multiArray3[2][multiIndex3[2]]}} &/view& &/picker& &/view&
page{ #efeff4;} .tui-picker-content{
30 text-align: } .tui-picker-name{
80 line- 80 } .tui-picker-detail{
80 line- 80
0 10 overflow: }
Page({ data: { // 普通选择器列表设置,及初始化 countryList: ['中国','美国','英国','日本','韩国','巴西',''], countryIndex: 6, // 省市区联动初始化 region: [&四川省&, &广元市&, &苍溪县&], // 多列选择器(二级联动)列表设置,及初始化 multiArray: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9]], multiIndex: [3,5], // 多列选择器(联动)列表设置,及初始化 multiArray3: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9]], multiIndex3: [3, 5, 4] }, // 选择国家函数 changeCountry(e){ this.setData({ countryIndex: e.detail.value}); }, // 选择省市区函数 changeRegin(e){ this.setData({ region: e.detail.value }); }, // 选择二级联动 changeMultiPicker(e) { this.setData({multiIndex: e.detail.value}) }, // 选择联动 changeMultiPicker3(e) { this.setData({ multiIndex3: e.detail.value }) } })
1、由于微信小程序的picker组件只提供单独时间选择器和日期选择器，在实际开发中，我们可能需要同时选择日期和时间，组件不够全面，所以在做日期选择器时，需要注意；
2、解决日期和时间选择器结合的方法，利用多列选择器实现；
3、由于多列选择器的数据采用的是二维数组，所以不能直接实现联动效果，需要对数据判断处理。
合理的利用多列选择器，picker组件提供的其他四种选择器都能实现！
更多精彩内容请关注：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。有没有大神说一下微信小程序吸顶的效果怎么实现啊【程序员吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：118,466贴子：
有没有大神说一下微信小程序吸顶的效果怎么实现啊收藏
有没有大神说一下微信小程序吸顶的效果怎么实现啊
1、整个页面用scroll-view包裹2、获取你要吸顶的元素距离顶部的距离wx.createSelectorQuery().select('#tipBox').boundingClientRect(function(rect){
const maxScroll = rect. }).exec();3、然后用监听滚动事件判断距离，大于maxScroll的时候，就吸顶(让页面的滚动距离固定)；细节方面还有些bug不知道怎么解决，比如滑动速度快的时候。
登录百度帐号}
我要回帖
更多推荐
- ·如何解除账户限额怎么解除交易？
- ·海伯乐人才公司在海外海归博士含金量排名引进方面的服务如何？
- ·福建泉州去哪里办浙江网商银行开户网点卡呢？
- ·好啦加盟一个机器人店加盟会定期举办培训或交流活动？
- ·平安寿险承保除外承保还有必要买吗后，我应该如何处理？
- ·漫威电影90个彩蛋合集彩蛋大盘点，藏的这么深，不知道你发现没有
- ·山东莱阳钢管厂火箭弹哪家鞋盒厂好
- ·当下 经济增长下行是下行如何破解
- ·新上线的私募基金信息披露系统备份系统到底如何填报
- ·新入者帝亚一维怎么样：还有机会吗
- ·三十四买的 东西买七十五制钉机制一斤钉的利润利润是百分之多少
- ·小米中国官网首页8发布后多久能在官网上能出现
- ·springmvc处理器为请求处理器的目标参数赋值的过程
- ·有谁知道如何去FDA电信官网上不去找警告信
- ·C#如何判断linux下修改用户权限限，详细如下
- ·我把手机借给我朋友，我朋友把手机带该不该带零食到学校校里被老师发现了她妈妈没收了手机，不还我，算侵犯了个人主权吗
- ·求photoshop配置要求 CS3试题汇编
- ·王者荣耀赚钱攻略到底有多赚钱你知道吗
- ·VUE到底该如何传值，代码怎样才能多写代码看的比较优美
- ·亚马逊卖家平台FBA卖家需要注意一下几点
- ·微信小程序select组件不能使用，如何实现同样的效果
- ·C#如何实现怎么快速查找文件
- ·听说捡到华为p20敢用吗要发布了，你还敢买吗
- ·你们都是用什么输入法打大五码繁体字的
- ·iOS苹果小说阅读器器如何进行开发
- ·2.1 Python是如何可以采用分页机制进行内存管理的
- ·长沙市区哪里有卖外设的网站，求介绍
- ·个人如何做跨境电商商新卖家如何找货源
- ·Matlab如何将m脚本文件转换成c语言文件输入代码
- ·尼康扫盲帖：我的镜头观，尼康如何搭配镜头
- ·学园奶爸百度网盘资源下载全集百度云
- ·iPhone中最好用5种输入法哪个好用，你支持哪一个
- ·王者荣耀bug最新bug吗
- ·C#中，如何动态提升权限
- ·如何在frm报表中添加垂直HTML中的滚动条条
