夜光序言:
梦初彷徨,三院琉璃不及你,不念曾经,谁把一世佳话浅笑谱写,后世传芳。
正文:
以道御术 / 以术识道
<scroll-view scroll-y>
<view class="produt" wx:for="{{productList}}"
wx:key="{{index}}">
<image src="{{item.src}}" mode="widthFix"></image>
<view class="info">
<text>{{item.title}}</text>
<text>{{item.price}}</text>
</view>
<checkbox-group>
<checkbox></checkbox>
</checkbox-group>
</view>
</scroll-view>
<view>
<button>
去付款
<text>¥{{price}}</text>
</button>
</view>
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
/*类目列表*/
productList:[],
productList:[
{
"id": 1,
"name": "美图1",
"src": "/images/12.jpg",
"price":111
},
{
"id": 2,
"name": "美图2",
"src": "/images/7.jpg",
"price": 111
},
{
"id": 3,
"name": "美图3",
"src": "/images/9.jpg",
"price": 111
},
{
"id": 4,
"name": "美图4",
"src": "/images/11.jpg",
"price": 111
}
],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
that.setData({
linkUrl: options.linkUrl
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
样式什么的,看个人审美,顾客的审美,~~~
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
/*类目列表*/
productList:[],
productList:[
{
"id": 1,
"price": 1111,
"src": "/images/12.jpg",
"title": "臻品"
},
{
"id": 2,
"price": 1111,
"src": "/images/7.jpg",
"title": "臻品"
},
{
"id": 3,
"price": 1111,
"src": "/images/9.jpg",
"title": "臻品"
},
{
"id": 4,
"price": 1111,
"src": "/images/11.jpg",
"title": "臻品"
},
{
"id": 5,
"price": 1111,
"src": "/images/21.png",
"title": "臻品"
},
{
"id": 6,
"price": 1111,
"src": "/images/22.jpg",
"title": "臻品"
}
,
{
"id": 7,
"price": 1111,
"src": "/images/24.jpg",
"title": "臻品"
}
],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
that.setData({
linkUrl: options.linkUrl
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
<!--pages/index/index.wxml-->
<!--pages/milk/milk.wxml-->
<!-- <text>精彩呈现</text> -->
<!-- 首先 需要一个容器 夜光 -->
<!-- <view class="container3">
<!-- 学过前端都知道,这种一直变换的图片组件~~ 在微信小程序开发里面稍微轻松点-->
<!-- 6/8/10个icon模板 -->
<!-- <view class='sorts-wrap'>
<view class='flex-wrap' wx:for='{{sortRows}}' wx:for-item='sortRow' wx:for-index='rowIndex' wx:key='unique'>
<view class='flex-item' wx:for='{{sortRow}}' wx:for-item='sortItem' wx:for-index='sortIndex' wx:key='unique'>
<navigator url='{{sortItem.jumpUrl}}' hover-class='none'>
<image src='{{sortItem.image}}'></image>
<text>{{sortItem.title}}</text>
</navigator>
</view>
</view>
</view>
</view> -->
<scroll-view scroll-y>
<view class="product" wx:for="{{productList}}"
wx:key="{{index}}">
<image src="{{item.src}}" mode="widthFix"></image>
<view class="info">
<text>{{item.title}}</text>
<text class="price">{{item.price}}</text>
</view>
<checkbox-group id="{{item.id}}" bindchange="pricechange">
<checkbox value="{{item.id}}"></checkbox>
</checkbox-group>
</view>
</scroll-view>
<view class="bottom">
<button>
去付款
<text>¥{{price}}</text>
</button>
</view>
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
/*类目列表*/
// sortRows: [
// [{
// image: "/images/3.jpg",
// title: "美食",
// jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
// },
// {
// image: "/images/3.jpg",
// title: "猫眼电影",
// jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
// },
// {
// image: "/images/3.jpg",
// title: "休闲娱乐",
// jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
// },
// {
// image: "/images/3.jpg",
// title: "外卖",
// jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
// }
// ],
// [{
// image: "/images/3.jpg",
// title: "KTV",
// jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
// },
// {
// image: "/images/3.jpg",
// title: "丽人",
// jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
// },
// {
// image: "/images/3.jpg",
// title: "火车票",
// jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
// },
// {
// image: "/images/3.jpg",
// title: "更多",
// jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
// }
// ]
// ],
productList:[],
productList:[
{
"id": 1,
"price": 1111,
"src": "/images/12.jpg",
"title": "臻品"
},
{
"id": 2,
"price": 1111,
"src": "/images/7.jpg",
"title": "臻品"
},
{
"id": 3,
"price": 1111,
"src": "/images/9.jpg",
"title": "臻品"
},
{
"id": 4,
"price": 1111,
"src": "/images/11.jpg",
"title": "臻品"
},
{
"id": 5,
"price": 1111,
"src": "/images/21.png",
"title": "臻品"
},
{
"id": 6,
"price": 1111,
"src": "/images/22.jpg",
"title": "臻品"
}
,
{
"id": 7,
"price": 1111,
"src": "/images/24.jpg",
"title": "臻品"
}
],
price:0
},
//夜光:获取产品对象
getProduct(){
var productId = wx.getStorageSync("id");
var p = this.data.productList;
for(var i = 0;i<p.length;i++){
if(p[i].id == productId){
this.setData({
product:p[i]
})
}
console.log(this.data.product.src);
}
},
pricechange(e) {
var priceSum = 0;
var id = e.currentTarget.id;
var num = e.detail.value;
var p = this.data.productList;
//夜光 判断当前选中的元素是否被选中
if (num != "") {
for (var i = 0; i < p.length; i++) {
if (p[i].id == id) {
priceSum = this.data.price + p[i].price
// this.setData({
// price:priceSum + p[i].price
// })
}
}
}
else {
for (var i = 0; i < p.length; i++) {
if (num == id) {
priceSum = this.data.price - p[i].price
// this.setData({
// price: priceSum - p[i].price
// })
}
}
}
console.log(priceSum);
this.setData({
price: priceSum
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
that.setData({
linkUrl: options.linkUrl
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})