实验要求

模仿京东小程序，实现下列功能
- 首页包含了手机图片，手机的描述，手机的价格，购物车图标
- 首页显示两行文字，多余的文字隐藏，以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:"2020年11月"},{id:2,img:'../../img/2.jpg',money:'￥1799',valuea:"OPPO Reno5 ",valueb:"8+128GB 极光蓝 ",valuec:"6400万水光人像四摄 65W超级闪充 5G手机",date:"2020年12月"},{id:3,img:'../../img/3.jpg',money:'￥1499',valuea:"realme 真我Q3s ",valueb:"8+128GB 星云色 ",valuec:"骁龙778G 5G 144Hz变帧屏 5000mAh大电池 5G手机",date:"2021年10月"},{id:4,img:'../../img/4.jpg',money:'￥1199',valuea:"Redmi Note 9 ",valueb:"8+128GB 云墨灰 ",valuec:"天玑800U 18W快充 4800万超清三摄 智能手机 小米 红米 5G",date:"2020年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>上架日期：2020年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>上架日期：2020年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>上架日期：2021年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>上架日期：2020年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})},})

效果图：

微信小程序实现商品列表跳转详情页相关推荐

微信小程序中商品列表不显示
在做这个商品列表的时候不显示图片,这是我在网上找的一个案例,把它的样式复制过来后不显示,经过查找是根目录的这个种的continer跟他的样式重叠改成就好了,如果需要这个功能的这个项目地址(仿美团) ...
微信小程序开发（九）————文章详情页的实现
我们在上一篇文章中已经制作出来了个人博客列表页,本篇实现详细内容. 首先第一步我们肯定是要创建文件夹,我们选择在pages目录下面的post目录里面创建post-detail的文件夹,如图: 教给大家 ...
微服务商城系统实战后台管理页面、商家管理页面、商品列表跳转详情页
文章目录一.后台管理 1.根据点击的 div 展示相应页面 2.解决 height: 100% 不起作用问题 3. th:onclick 引用的函数参数是 model值二.商家管理 1.th:ea ...
微信小程序开发之——个人中心-个人详情页(6)
一概述个人详情页对应的页面为:pages/detail/detail 页面搭建页面逻辑二页面搭建 2.1 布局文件(detail.wml) <view class="info ...
微信小程序新闻信息列表展示
微信小程序信息展示列表 wxml  <view class='haibao' bindtap="seeDetail" id="{ ...
小程序 | 微信小程序实现商品分类列表
小程序 | 微信小程序实现商品分类列表一.效果展示二.代码实现  <view class="container"> <! ...
图解微信小程序---获取电影列表
图解微信小程序---获取电影列表代码笔记 list跳转第一步:编写前端页面获取相关的电影列表参数(对于显示参数不熟悉,可以先写js,通过console Log的方式获取我们电影的相关数据字段,后 ...
微信小程序快速建立列表
如何在微信小程序中建立列表,并且实现列表项的动态增添,点击某一列表项实现界面的跳转,可以通过navigator组件进行表示. wxml文件 <view class="box" ...
基于微信小程序的用户列表点赞功能
代码地址如下: http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4. ...

微信小程序实现商品列表跳转详情页

实验要求

代码：

效果图：

微信小程序实现商品列表跳转详情页相关推荐

最新文章

热门文章