微信小程序电商实战-商品详情（上）

无毁的湖光-A 2017-12-28 17:03:00 ⋅ 687 阅读

上一篇：微信小程序电商实战-首页（下）

先看一下今天要实现的小程序商品详情页吧！


本期我们要实现小程序商品详情页的头部标题、头部轮播、商品详情浮动按钮和商品内页布局。

一、设置头部标题

如上图所示，头部标题是商品详情 如果不进行设置的话会默认为app.json 设置的window.navigationBarTitleText值。

detail.json
{
  "navigationBarTitleText": "商品详情"
}

二、商品轮播

如下图所示，商品详情页的商品轮播。



detail.wxml
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
        <image src="{{item}}" src="{{item}}" bindtap="previewImage" mode="widthFix"></image>
    </swiper-item>
  </block>
</swiper>
detail.wxss
page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 直接设置swiper属性 */
swiper {
  /* height: 500rpx; */
    height: 600rpx;
    background: #F3F4F6;
    text-align: center;  
}
swiper-item image {
  width: 80%;
  height: 100%;
}
detail.js
/**
   * 页面的初始数据
   */
  data: {
    // banner
    imgUrls: [
      "https://m.360buyimg.com/n12/jfs/t11317/108/1080677336/325163/f4c2a03a/59fd8b17Nbe2fcca3.jpg!q70.jpg",
      "https://m.360buyimg.com/n12/jfs/t11575/282/348533702/60173/d75cd1cc/59edb8d6N688b420f.jpg!q70.jpg",
      "https://m.360buyimg.com/n12/jfs/t11536/279/360605865/15194/442cab0b/59edb8d3N163a7608.jpg!q70.jpg",
      "https://m.360buyimg.com/n12/s750x750_jfs/t9733/126/2033941175/68120/a4eb4468/59edb8d6N37bea6f7.jpg!q70.jpg",
      "https://m.360buyimg.com/n12/s750x750_jfs/t10744/195/2053933852/71608/94425578/59edb8d6Ne28c70ff.jpg!q70.jpg"
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔,3s
    duration: 1000, //  滑动动画时长1s
}

三、商品详情浮动图标+商品描述

detail.wxml
<!--图文详情按钮-->
<view class='tab-bar-detail'>
      <text>图文</text>
      <text>详情</text>
</view> 

<view class="product-price-wrap">
 <view>
    <p class="product-price-new">￥7935.84</p>  
    <p class="product-price-old">原价￥9018.00</p> 
    <p class="discount">8.8折</p>
  </view>
  <view>
    <image src="../../images/bottomNav/share.png" />  
  </view>   
</view>
<view class="product-name-wrap">
  <text>Apple iPhone X手机 苹果x 全网通4G 全面屏手机 银色 官方标配 256G</text>
</view>
detail.wxss
/**图文详情 浮层**/
.tab-bar-detail{
  width: 75rpx;
  height: 75rpx;
  background-color: #fff;
  border-radius:25px;
  position: fixed;  
  z-index: 2;
  right: 4%;
  top:500rpx;
  border:1rpx solid #F3F4F6; 
  line-height:25rpx; 
  text-align: center;  
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tab-bar-detail text{
  font-size: 22rpx;
  color: #e80080;
}
/**商品价格**/
.product-price-wrap{
  display: flex;
  justify-content:space-between;/**两边对齐**/
  flex-direction: row;
  flex-wrap: wrap;
  margin:5px 5px;
   /* border:1rpx solid red;   */
}
 .product-price-wrap .product-price-new{
  color: #e80080;
  font-weight:400;
  font-size: 24px;
}
.product-price-wrap .product-price-old{
  color: #888;
  text-decoration: line-through;
  padding-left: 5px;
  font-size: 14px;
  line-height:30px;
  font-weight:300;
}
.product-price-wrap .discount{
  margin: 5px 5px;
  background-color: #000;
  color: #fff;
  height: 18px;
  font-size: 14px;
  border-radius:2px;
} 
.product-price-wrap image{
  width:40rpx;
  height: 40rpx;
  margin: 5px 5px; 
}
.product-name-wrap{
  margin: 0px 10px;
   /* border:1rpx solid red;  */
}
.product-name-wrap text{
  font-size: 14px;
  font-weight:400;
  line-height: .48rem;
  color: #404040;
}

四、商品内页详情

detail.wxml
<view class="details"> 
   <scroll-view scroll-y="true"> 
       <block wx:for-items="{{detailImg}}" wx:key="name">
       <image class="image_detail" src="{{item}}" mode="widthFix"/> 
    </block>  
   </scroll-view> 
 </view>
detail.wxss
.details{
   padding: 0px 5px 0 5px; 
}
.detail {
  display: flex;
  flex-direction: column;
  margin-top: 15rpx;
  margin-bottom: 0rpx;
}
detail.js
// 商品详情介绍
    detailImg: [
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_0_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_500_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_1000_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_1500_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_2000_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_2500_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_3000_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_3500_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_4000_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_4500_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_5000_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_5500_750_500&imageView&thumbnail=710x0&quality=85",

      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_6000_750_500&imageView&thumbnail=710x0&quality=85",

      "https://haitao.nos.netease.com/a108a6ae73914a91b7e07b8cc0ad32ad1511959470997jal1mqad10611.jpg?imageView&quality=98&crop=0_7500_750_500&imageView&thumbnail=710x0&quality=85",

      "https://haitao.nos.netease.com/a108a6ae73914a91b7e07b8cc0ad32ad1511959470997jal1mqad10611.jpg?imageView&quality=98&crop=0_8000_750_500&imageView&thumbnail=710x0&quality=85",

      "https://haitao.nos.netease.com/a108a6ae73914a91b7e07b8cc0ad32ad1511959470997jal1mqad10611.jpg?imageView&quality=98&crop=0_8500_750_500&imageView&thumbnail=710x0&quality=85",

      "https://haitao.nos.netease.com/a108a6ae73914a91b7e07b8cc0ad32ad1511959470997jal1mqad10611.jpg?imageView&quality=98&crop=0_9000_750_500&imageView&thumbnail=710x0&quality=85",

      "https://haitao.nos.netease.com/a108a6ae73914a91b7e07b8cc0ad32ad1511959470997jal1mqad10611.jpg?imageView&quality=98&crop=0_9500_750_376&imageView&thumbnail=710x0&quality=85",
    ],
  },

五、效果图


总结

在做商品图文详情页图片布局的时候遇到了问题，图片加载会不自然 并且比较模糊，具体处理方法可以参考另一篇文章微信小程序-Image 图片实现宽度100%，高度自适应。

好了，微信小程序电商实战-商品详情（上）已经写完了，还有微信小程序电商实战-商品详情（下）哦！

更多精彩实战内容请关注“IT实战联盟”喽~~~





注意：本文归作者所有，未经作者允许，不得转载

#微信小程序
阅读全部

全部评论: 0 条

    我有话说:

    微信小程序电商实战-首页（上）

    上一篇：微信小程序电商实战-入门篇 嗨，大家好！经过近两周的精心准备终于开始微信小程序电商实战之路喽。那么最终会做成什么样呢？好了，不啰嗦了 我们先看首页长什么样吧！   首页效果图

    微信小程序电商实战-商品详情加入购物车（下）

    今天会接着上一篇开始写商品详情页加入购物车的部分，直接看效果......

    微信小程序电商实战-首页（下）

    上一篇：微信小程序电商实战-首页（上）好了，上一期我们把首页搜索、导航栏和广告轮播给做完了，那么接下来会继续

    微信小程序电商实战-购物车（上）

    好久没更新小程序电商实战的文章了，是因为最近一直做整体架构调整，一些准备工作也是比较耗费时间的。在这几天将会有新版的 小程序电商教程推出.......

    微信小程序电商实战-商品列表流式布局

    今天给大家分享一下微信小程序中商品列表的流式布局方式，根据文章内容操作就可以看到效果哦~~~

    微信小程序微商城（四）：动态API实现商品详情页（上）

    1、实现商品详情页面布局（这篇实现3个模块，头部商品图片轮播、商品价格和商品描述、商品详情展示） 2、根据用户点击不同的商品请求API动态加载数据

    微信小程序电商实战-入门篇

    小程序开发工具有新版本更新啦！开发体验更好了，接下来一起为电商小程序做一下准备前期准备工作~~

    微信小程序实现商品数量加减

    这是一个用微信小程序原生代码实现的数量加减demo，主要是用于商品购物车或者商品详情修改数量使用

    微信小程序实战篇：商品属性联动选择（案例）

    本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果，素材参考了一点点

    微信小程序电商实战-购物车（下）

    我们继续接着昨天的购物车写，主要把剩下的数量加减 template 模板、选中计算功能实现掉！

    微信小程序微商城（五）：动态API实现商品详情页（下）

    加入购物车悬浮框、商品数量、价格计算、收藏和加入购物车功能开发

    微信小程序微商城（七）：动态API实现商品分类

    微信小程序商品分类页面布局并且调用动态API获取数据并加载

    微信小程序微商城（三）：电商首页福利专场无限下拉刷新动态API数据实现

    电商首页第5个模块-福利专场，通过https调用API数据模型来实现无限下拉刷新......

    微信小程序抖音实战-首页（上）

    你也可以用微信小程序编写一个抖音

    微信小程序-Image的widthFix属性和rpm尺寸的使用

    在做微信小程序的商品详情页，商品的详情是图片集合，渲染完成后发现图片加载的很不自然

    微信小程序微商城（八）：缓存实现商品购物车功能

    商品详情页将商品信息放入缓存，购物车页面读取缓存获取商品信息，购物车商品计算和删除缓存商品

    微信小程序微商城（九）：微信授权并实现个人中心页面页面

    实现微商城的微信授权并获取用户信息和个人中心页面布局

    微信小程序微商城（六）：动态API实现新品特卖商品流式布局

    实现新品特卖商品列表布局、调用动态API获取数据并加载和点击商品跳转商品详情

    微信小程序-template使用：实现购物车商品数量加减功能

    上一篇我们实现了购物车功能，里面有用到template模板功能来实现购物车商品数量加减和价格计算功能......