微信小程序实现购物车选择规格颜色效果
作者:小丫么小菜菜 发布时间:2024-09-28 10:15:58
标签:微信小程序,购物车
本文实例为大家分享了微信小程序实现购物车选择规格颜色效果的具体代码,供大家参考,具体内容如下
wxml:
<view>
<view>规格:</view>
<view class='dis'>
<block wx:for="{{guige}}">
<view class="{{gindex==index?'color':''}}" bindtap='guige' data-index='{{item.id}}' data-current='{{index}}'>{{item.name}}</view>
</block>
</view>
<view>颜色:</view>
<view class='dis'>
<block wx:for="{{color}}">
<view class="{{cindex==index?'color':''}}" bindtap='color' data-index='{{item.id}}' data-current='{{index}}'>{{item.name}}</view>
</block>
</view>
</view>
<view>{{guige[gindex].name}}:{{color[cindex].name}}</view>
js:
// pages/guige/guige.js
Page({
/**
* 页面的初始数据
*/
data: {
guige:[
{id:1,name:'M'},
{id:2,name:'L'},
{id:3,name:'X'},
{id:4,name:'S'}
],
color:[
{id:5,name:'红'},
{ id: 6, name: '橙'},
{ id: 7, name: '黄'},
{ id: 8, name: '绿'}
]
},
guige:function(e){
this.setData({
gid: e.currentTarget.dataset.index,
gindex: e.currentTarget.dataset.current,
})
},
color:function(e){
this.setData({
cid: e.currentTarget.dataset.index,
cindex: e.currentTarget.dataset.current,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
css:
.color{
color: red
}
.dis{display: flex;justify-content: space-around}
来源:https://blog.csdn.net/stp_zsj/article/details/82387782


猜你喜欢
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript
- 参数Parameters解析响应时间resolveTimeout 数据类型:长整型。简单地说就是程序对目标主机的名字解析解析的一个过程时间。
- 很简单的教程,献给喜欢SEO的朋友们。把article.asp?logID=26 替换成article.asp?/a
- 下表列出了所有Python语言支持的赋值运算符。假设变量a持有10和变量b持有20,则: 例如:试试下面的例子就明白了所有在Pyt
- git fetch和git pull都可以将远端仓库更新至本地那么他们之间有何区别?想要弄清楚这个问题有有几个概念不得不提。FETCH_HE
- 概要在调用第三方 API 的时候, 基本都有访问限速的限制条件. 第三方的 API 有多个的时候, 就不太好控制访问速度, 常常会导致 HT
- 创建SQL存储过程需要使用到的语法- 创建存储过程CREATE 存储过程的名称(参数)BEGIN...需要执行的SQL语句END- 调用CA
- 列表转化为字符串如下所示:>>> list1=['ak','uk',4]>>&
- python中自定义模块导入路径的方式主要有以下3种:(1)使用sys.path.append()随着程序执行,会动态地添加模块导入的路径,
- 本文实例为大家分享了swiper Scrollbar滚动条组件的具体代码,供大家参考,具体内容如下1、scrollbar为Swiper增加滚
- 目录Tornado是什么安装试试看使用tornado框架来写一个web application总结Tornado是什么学委之前在看Jupyt
- 环境Laravel 5.4原理在Laravel中,门面为应用服务容器中绑定的类提供了一个“静态”接口
- Windows环境下python的安装与使用一、python如何运行程序首先说一下python解释器,它是一种让其他程序运行起来的程序。当你
- 本文实例为大家分享了python样条插值的具体实现代码,供大家参考,具体内容如下import numpy as npimport panda
- 这篇文章主要介绍了Python如何把多个PDF文件合并,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋
- 新闻、文章系统中经常会用到的一个功能,添加上一篇,下一篇或相关文章的功能可以增加访客停留的时间。也许新人在做这上一篇、下一篇功能时使用的是I
- 在python3的sorted中去掉了cmp参数,转而推荐“key+lambda”的方式来排序。如果需要对python的list进行多级排序
- 一、配置webdriver下载谷歌浏览器驱动,并配置好import timeimport randomfrom PIL import Ima
- 1. python中的变量:python中的变量声明不需要像C++、Java那样指定变量数据类型(int、float等),因为python会
- 使用shutil.move(src, dst),src为要移动的文件的路径,dst为目的路径,路径必须是绝对路径import osimpor