発光プロローグ：
夢の初めに、ためらいながら、第三の中庭リウリはあなたほど良くありません、そして私は最初の物語を書いて微笑んだ一度も逃さないでください、そして未来の世代は香りがよいでしょう。
テキスト：
タオでタオを認識する
<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 () {
}
})
