资生堂的化妆品不错,旗下有很多系列,适合不同肤质和年龄。在资生堂旗下拥有众多的品牌Cle de Peau(CDP)、IPSA(茵芙莎) Ettusais(爱杜莎)、CARITA 凯伊黛 、Decleor 思妍丽、肌肤之匙(ole de peau Beaute)。
资生堂的产品有:ZA系列的产品、泊美的产品、爱泊丽、欧珀莱、白娣颜、悠莱、优白、水芝澳等系列都属于资生堂旗下产品,而且还包括资生堂洗发水、去角质产品、资生堂防晒霜等多种好用产品。
资生堂致力于通过研发接触肌肤时能令人发生舒适感的原料主剂;研发加强粉底的功效及应用性的粉末;研讨防御肌肤不受紫外线及干燥等外界环境损伤的机理;研发具有“美白”、“抗老化”、“生发”等功能的药剂,为宽大地花费者供给满意的多样化“价值”。
选购国产化妆品时,注意检查产品外包装有无卫生许可证号(生产许可证号);选择进口化妆品时,应注意检查有无中文标签标明进口商名称、****、产品用途、使用方法、保存条件、使用期限和可能引起的不良反应。
化妆品不良反应是指人们在日常生活中正常使用化妆品所引起的皮肤及其附属器的病变,以及人体局部或全身性的损害。不包括生产、职业性接触化妆品及其原料和使用假冒伪劣产品所引起的病变或者损害。
以上内容参考-资生堂
本篇文章主要介绍了微信小程序实战篇之购物车的实现代码示例,详细的介绍了购物车的功能实现,具有一定的参考价值,有兴趣的可以了解一下
哈喽,大家好,快半个月没写了,现在提笔都有点生硬了,一直没更新的原因,一个是代码君也要上班,加上最近工作比较忙,还有就是写文章一直未被认可,所以没什么动力再创作了,那时真的坚持不下去,打算放弃了,感谢读者曹明,一个韩国的研究生读者,支持我,并给我鼓励,期待我更新下一篇,我非常感动,瞬间战斗力恢复,其实你们简单的点赞,评论,都是给我最大的支持,好了,煽情完毕,该讲今天的重点了,购物车,购物车的界面实现到不是很难,难点是处理里面的逻辑,无论是小程序,还是APP,购物车的逻辑都是最难的,下面开始教大家如何实现购物车了,先上效果图
购物车实现
cartwxml
<import src="/template/quantity/indexwxml" />
<scroll-view class="scroll" scroll-y="true">
<view class="separate"></view>
<view wx:for="{{carts}}">
<view class="cart_container">
<image class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}" src="{{itemisSelect'//images/cart/comment_selectpng':'//images/cart/comment_normalpng'}}" />
<image class="item-image" src="{{itempic}}"></image>
<view class="column">
<text class="title">{{itemname}}</text>
<view class="row">
<text class="sku-price">¥</text>
<text class="sku-price">{{itemprice}}</text>
<view class="sku">
<template is="quantity" data="{{ itemcount, componentId: index }}" />
</view>
</view>
</view>
</view>
<view class="separate"></view>
</view>
</scroll-view>
<view class="bottom_total">
<view class="bottom_line"></view>
<view class="row">
<image class="item-allselect" bindtap="allSelect" src="{{isAllSelect'//images/cart/comment_selectpng':'//images/cart/comment_normalpng'}}" />
<text class="small_text">全选</text>
<text>合计:¥ </text>
<text class="price">{{totalMoney}}</text>
<button class="button-red" bindtap="toBuy" formType="submit">去结算</button>
</view>
</view>布局不是很复杂,一个循环列表,循环出购物车商品,外加一个结算的底部控件,还需要提醒的是,循环列表外面要加一层scroll-view,这样当数据很多是时候,可以滚动,不熟悉scroll-view的,请自行翻看前面几篇文章,里面有讲解
catwxss
/ pages/cart/cartwxss /
cart_container {
display: flex;
flex-direction: row;
}
scroll {
margin-bottom: 120rpx;
}
column {
display: flex;
flex-direction: column;
}
row {
display: flex;
flex-direction: row;
align-items: center;
}
sku {
margin-top: 60rpx;
margin-left: 100rpx;
}
sku-price {
color: red;
position: relative;
margin-top: 70rpx;
}
price {
color: red;
position: relative;
}
title {
font-size: 38rpx;
margin-top: 40rpx;
}
small_text {
font-size: 28rpx;
margin-right: 40rpx;
margin-left: 10rpx;
}
item-select {
width: 40rpx;
height: 40rpx;
margin-top: 90rpx;
margin-left: 20rpx;
}
item-allselect {
width: 40rpx;
height: 40rpx;
margin-left: 20rpx;
}
item-image {
width: 180rpx;
height: 180rpx;
margin: 20rpx;
}
bottom_line {
width: 100%;
height: 2rpx;
background: lightgray;
}
bottom_total {
position: fixed;
display: flex;
flex-direction: column;
bottom: 0;
width: 100%;
height: 120rpx;
line-height: 120rpx;
background: white;
}
button-red {
background-color: #f44336; / 红色 /
}
button {
position: fixed;
right: 0;
color: white;
text-align: center;
display: inline-block;
font-size: 30rpx;
border-radius: 0rpx;
width: 30%;
height: 120rpx;
line-height: 120rpx;
}wxss样式没什么可说的,了解其属性,调用class就好,重点说一下cartjs,全篇的逻辑都在这里面
cartjs
// pages/cart/cartjs
var Temp = require('//template/contractjs');
Page(Objectassign({}, TempQuantity, {
data: {
isAllSelect:false,
totalMoney:0,
// 商品详情介绍
carts: [
{
pic: "http://mzdjmallxmispcn/files/product/20161201/148058328876jpg",
name:"日本资生堂洗颜",
price:200,
isSelect:false,
// 数据设定
count: {
quantity: 2,
min: 1,
max: 20
},
},
{
pic: 'http://mzdjmallxmispcn/files/product/20161201/148058301941jpg',
name: "倩碧焕妍活力精华露",
price: 340,
isSelect: false,
// 数据设定
count: {
quantity: 1,
min: 1,
max: 20
},
},
{
pic: 'http://mzdjmallxmispcn/files/product/20161201/14805828016jpg',
name: "特效润肤露",
price: 390,
isSelect: false,
// 数据设定
count: {
quantity: 3,
min: 1,
max: 20
},
},
{
pic: 'http://mzdjmallxmispcn/files/product/20161201/148058228431jpg',
name: "倩碧水嫩保湿精华面霜",
price: 490,
isSelect: false,
// 数据设定
count: {
quantity: 1,
min: 1,
max: 20
},
},
{
pic: 'http://mzdjmallxmispcn/files/product/20161201/148057953326jpg',
name: "兰蔻清莹柔肤爽肤水",
price: 289,
isSelect: false,
// 数据设定
count: {
quantity: 10,
min: 1,
max: 20
},
},
{
pic: "http://mzdjmallxmispcn/files/product/20161201/148057921620_middlejpg",
name: "LANCOME兰蔻小黑瓶精华",
price: 230,
isSelect: false,
// 数据设定
count: {
quantity: 1,
min: 1,
max: 20
},
},
],
},
//勾选事件处理函数
switchSelect: function (e) {
// 获取item项的id,和数组的下标值
var Allprice = 0,i=0;
let id = etargetdatasetid,
index = parseInt(etargetdatasetindex);
thisdatacarts[index]isSelect = !thisdatacarts[index]isSelect;
//价钱统计
if (thisdatacarts[index]isSelect) {
thisdatatotalMoney = thisdatatotalMoney + thisdatacarts[index]price;
}
else {
thisdatatotalMoney = thisdatatotalMoney - thisdatacarts[index]price;
}
//是否全选判断
for (i = 0; i < thisdatacartslength; i++) {
Allprice = Allprice + thisdatacarts[i]price;
}
if (Allprice == thisdatatotalMoney)
{
thisdataisAllSelect=true;
}
else
{
thisdataisAllSelect = false;
}
thissetData({
carts: thisdatacarts,
totalMoney: thisdatatotalMoney,
isAllSelect: thisdataisAllSelect,
})
},
//全选
allSelect: function (e) {
//处理全选逻辑
let i = 0;
if (!thisdataisAllSelect)
{
for (i = 0; i < thisdatacartslength; i++) {
thisdatacarts[i]isSelect = true;
thisdatatotalMoney = thisdatatotalMoney + thisdatacarts[i]price;
}
}
else
{
for (i = 0; i < thisdatacartslength; i++) {
thisdatacarts[i]isSelect = false;
}
thisdatatotalMoney=0;
}
thissetData({
carts: thisdatacarts,
isAllSelect: !thisdataisAllSelect,
totalMoney: thisdatatotalMoney,
})
},
// 去结算
toBuy() {
wxshowToast({
title: '去结算',
icon: 'success',
duration: 3000
});
thissetData({
showDialog: !thisdatashowDialog
});
},
//数量变化处理
handleQuantityChange(e) {
var componentId = ecomponentId;
var quantity = equantity;
thisdatacarts[componentId]countquantity = quantity;
thissetData({
carts: thisdatacarts,
});
}
}));介绍一下用到的参数
isAllSelect:是否全选
totalMoney:总金额
carts :购物车商品数据
switchSelect 勾选按钮需要做的逻辑处理
判断是否达到全部勾选,如果全部勾选,底部的全选按钮要点亮,判断依据是,价钱是否等于总价,当然这只是一种判断方式,读者也可以通过勾选的数量判断,
对勾选或取消的按钮,进行总价的加减法计算
thissetData,更新数据,这个是重点,每次处理完数据,都要记得更新数据
allSelect 全选按钮的逻辑处理
全选就把每个item勾选图标点亮,然后统计总价钱,不全选就置为灰色,总价钱为0
thissetData更新数据
微信小程序数据处理
一、修改数据方式
data:{
name:'我是初始化的name'
}1、thisdataname
thisdataname='我是代码君data'2、thissetData
thissetData({
name:'我是代码君setData'
})这两种方式都可以改变数据,thissetData的好处是可以有刷新的效果,即实时更新数据
二、修改对象数组
data:{
person:{
name:'代码君',
city:'厦门'
}
}修改全部对象
thissetData({
person:{
name:'新代码君',
city:'湖南'
}
})修改部分数据
thissetData({
'personname': '代码君只修改名字'
})
//多个数组用这个
thissetData({
'person[0]name': '代码君只修改名字'
})三、添加删除数据
1、添加数据concat
//假设这一段是我们要新增的数组
var newarray = [{
name:'增加的数据--'+new Date()getTime() ,
}];
//向前--用newarray与thisdatalist合拼
thisdatalist = newarrayconcat(thisdatalist);
//向后--用thisdatalist与newarray合拼
thisdatalist = thisdatalistconcat(newarray);2、删除数据splice()删除数据,然后返回被删除的数据
//删除
remove:function (e){
var dataset = etargetdataset;
var Index = datasetindex;
//通过index识别要删除第几条数据,第二个数据为要删除的项目数量,通常为1
thisdatalistsplice(Index,1);
//渲染数据
thissetData({
list:thisdatalist
});
}3、清空数据
//清空
clear:function (){
//其实就是让数组变成一个空数组即可
thissetData({
list:{}
});
}上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
使用dataset如何实现延时加载
在jquery中有关手机触屏滑动功能
在Mac中如何安装nvm(详细教程)
在微信小程序中如何实现时间功能
欢迎分享,转载请注明来源:品搜搜测评网