实验要求
模仿京东小程序，实现下列功能
首页包含了手机图片，手机的描述，手机的价格，购物车图标首页显示两行文字，多余的文字隐藏，以3个点代替点击页面不同的地方，能够跳转到不同的手机详情页面手机详情页包含手机图片，上架日期，价格，手机描述等图文信息
参考图1
参考图2
代码：
方法一：
index.wxml
<view id="bg"><block wx:for="{{list}}" wx:for-item="item" wx:key="index"><view class="container_small" bindtap="tiaozhuan" data-bid="{{item.id}}"><image src="{{item.img}}" class="img"></image><view class="text">{{item.valuea}}{{item.valueb}}{{item.valuec}}</view><view id="money">{{item.money}}</view><image src="../../img/car.png" id="car"></image></view></block></view>
index.wxss
#bg{background-color: #1e30d0;width: 400px;height: 510px;}.container_small{display: inline-block;width: 150px;height: 210px;margin-left: 7px;margin-top: 15px;border-radius: 5px;background-color: white;}.img{width: 150px;height: 150px;border-radius: 5px;}.text{font-size: 11px;font-family: "仿宋";display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;white-space: normal !important;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}#money{display: inline-block;font-size: 10px;color: #ef250f;}#car{margin-left: 100px;display: inline-block;width: 15px;height: 10px;}
index.js
const app = getApp()Page({data:{list:[{id:1,img:'../../img/1.jpg',money:'￥1199',valuea:"OPPO K7x ",valueb:"6+128GB 云之彼端 ",valuec:"4800万四摄 5000mAh长续航 90Hz电竞屏 30W闪充 智能 5G手机",date:"11月"},{id:2,img:'../../img/2.jpg',money:'￥1799',valuea:"OPPO Reno5 ",valueb:"8+128GB 极光蓝 ",valuec:"6400万水光人像四摄 65W超级闪充 5G手机",date:"12月"},{id:3,img:'../../img/3.jpg',money:'￥1499',valuea:"realme 真我Q3s ",valueb:"8+128GB 星云色 ",valuec:"骁龙778G 5G 144Hz变帧屏 5000mAh大电池 5G手机",date:"10月"},{id:4,img:'../../img/4.jpg',money:'￥1199',valuea:"Redmi Note 9 ",valueb:"8+128GB 云墨灰 ",valuec:"天玑800U 18W快充 4800万超清三摄 智能手机 小米 红米 5G",date:"11月"}],a:"",},tiaozhuan:function(event){this.setData({a:this.data.list[event.currentTarget.dataset.bid-1]})wx.navigateTo({url: '../new/new?id='+this.data.a.id+'&img='+this.data.a.img+'&money='+this.data.a.money+'&valuea='+this.data.a.valuea+'&valueb='+this.data.a.valueb+'&valuec='+this.data.a.valuec+'&date='+this.data.a.date,})}})
new.wxml
<!--pages/new/new.wxml--><image src="{{img}}"></image><view>产品编号：{{id}}</view><view>上架日期：{{date}}</view><view>产品价格：{{money}}</view><view>产品描述：{{valuea}}</view><view>{{valueb}}</view><view>{{valuec}}</view>
new.js
Page({onLoad: function (options) {this.setData({id:options.id,img:options.img,money:options.money,valuea:options.valuea,valueb:options.valueb,valuec:options.valuec,date:options.date})},})
方法二：
index.wxml
<view id="bg"><view class="container_small" bindtap="tiaozhuan" data-bid="{{one}}"><image src="../../img/1.jpg" class="img" ></image><view class="text">OPPO K7x 6+128GB 云之彼端 4800万四摄 5000mAh长续航 90Hz电竞屏 30W闪充 智能 5G手机</view><view id="money">￥1199</view><image src="../../img/car.png" id="car"></image></view><view class="container_small" bindtap="tiaozhuan" data-bid="{{two}}"><image src="../../img/2.jpg" class="img"></image><view class="text">OPPO Reno5 8+128GB 极光蓝 6400万水光人像四摄 65W超级闪充 5G手机</view><view class="money_car"><view id="money">￥1799</view><image src="../../img/car.png" id="car"></image></view></view><view class="container_small" bindtap="tiaozhuan" data-bid="{{three}}"><image src="../../img/3.jpg" class="img"></image><view class="text">realme 真我Q3s 骁龙778G 5G 144Hz变帧屏 5000mAh大电池 8+128GB 星云色 5G手机</view><view id="money">￥1499</view><image src="../../img/car.png" id="car"></image></view><view class="container_small" bindtap="tiaozhuan" data-bid="{{four}}"><image src="../../img/4.jpg" class="img"></image><view class="text">Redmi Note 9 5G 天玑800U 18W快充 4800万超清三摄 云墨灰 8+128GB 智能手机 小米 红米</view><view id="money">￥1199</view><image src="../../img/car.png" id="car"></image></view></view>
index.wxss
#bg{background-color: #1e30d0;width: 400px;height: 510px;}.container_small{display: inline-block;width: 150px;height: 210px;margin-left: 7px;margin-top: 15px;border-radius: 5px;background-color: white;}.img{width: 150px;height: 150px;border-radius: 5px;}.text{font-size: 11px;font-family: "仿宋";display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;white-space: normal !important;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}#money{display: inline-block;font-size: 10px;color: #ef250f;}#car{margin-left: 100px;display: inline-block;width: 15px;height: 10px;}
index.js
const app = getApp()Page({data:{num:0,one:1,two:2,three:3,four:4,},tiaozhuan:function(event){this.setData({num:event.currentTarget.dataset.bid})wx.navigateTo({url: '../one/one?num='+this.data.num,})}})
one.wxml
<view><block wx:if="{{num==1}}"><image src="../../img/1.jpg"></image><view>产品编号：1001</view><view>上架日期：11月</view><view>产品价格：￥1199</view><view>产品描述：OPPO K7x</view><view>6+128GB 云之彼端</view><view>4800万四摄 5000mAh长续航 90Hz电竞屏 30W闪充 智能 5G手机</view></block><block wx:elif="{{num==2}}"><image src="../../img/2.jpg"></image><view>产品编号：1002</view><view>上架日期：12月</view><view>产品价格：￥1799</view><view>产品描述：OPPO Reno5</view><view>8+128GB 极光蓝</view><view>6400万水光人像四摄 65W超级闪充 5G手机</view></block><block wx:elif="{{num==3}}"><image src="../../img/3.jpg"></image><view>产品编号：1003</view><view>上架日期：10月</view><view>产品价格：￥1499</view><view>产品描述：realme 真我Q3s </view><view>8+128GB 星云色</view><view>骁龙778G 5G 144Hz变帧屏 5000mAh大电池 5G手机</view></block><block wx:elif="{{num==4}}"><image src="../../img/4.jpg"></image><view>产品编号：1004</view><view>上架日期：11月</view><view>产品价格：￥1199</view><view>产品描述：Redmi Note 9 </view><view>云墨灰 8+128GB</view><view>5G 天玑800U 18W快充 4800万超清三摄 智能手机 小米 红米</view></block></view>
one.js
Page({onLoad: function (options) {this.setData({num:options.num})},})
