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

 
商品详情.gif

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

一、设置头部标题

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

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

二、商品轮播

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

 
商品轮播.jpg
detail.wxml
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
        <image src="{{item}}" data-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",
    ],
  },

五、效果图

 
效果图.jpg

总结

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

作者：IT实战联盟Lin
链接：https://www.jianshu.com/p/6cee51acd018
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

微信小程序电商实战-商品详情（上）的更多相关文章

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

    嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯定不会只做一个静态demo哦,先把我们小程序电商实战的整体架构发出来晒一下,请看下图:   架构图. ...

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

    今天给大家分享一下微信小程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~ 流式布局概念 流式布局也叫百分比布局 把元素的宽,高,margin,padding不再用固定数值,改用百分 ...

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

    小程序开发工具有新版本更新啦!开发体验更好了,详情可以查看微信公众平台-小程序https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.h ...

  4. 微信小程序电商实战（-）商城首页

    首先在app.json中配置页面和底部tabbar { "pages":[ "pages/index/index", "pages/kind/kind ...

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

    好了,上一期我们把首页搜索.导航栏和广告轮播给做完了,那么接下来会继续完成我们首页的剩余部分,先看我们要实现的效果吧!   本期实现效果图.gif 本期我们要实现首页的实时热销榜.福利专场和左下方个人 ...

  6. 《微信小程序商城开发实战》笔者的新书，欢迎各位粉丝上京东购买

    作者图书京东链接,请点击------>>>    **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...

  7. 《微信小程序商城开发实战》唐磊，全网真实评价截图，不吹不黑，全部来自网友的真实评价

    偶尔看了下网友的销量和评价,感觉还不错,因为市面上大多关于小程序的书籍可能写的不够全面,要么只是点到为止的大致罗列,要么就是只简单介绍一下小程序的 界面设计这块.这样很难给学习小程序开发的人一个完成的 ...

  8. 微信小程序入门与实战 常用组件API开发技巧项目实战*全

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  9. 微信小程序入门与实战 从0到1进行细致讲解 涵盖小程序开发核心技能下载

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

随机推荐

  1. 洛谷P4072 [SDOI2016]征途（斜率优化）

    传送门 推式子(快哭了……)$$s^2*m^2=\sum _{i=1}^m (x_i-\bar{x})^2$$ $$s^2*m^2=m*\sum _{i=1}^m x_i^2-2*sum_n\sum ...

  2. DOS下修改IP地址

    这两天不知道怎么回事,IPV4竟然无法修改,郁闷之极下,想到用命令行试试. 于是敲入下面的代码: >netsh <Enter> netsh>interface <Ente ...

  3. 老男孩Day2作业：购物车程序

    作业需求: 用户入口: 1.商品信息存在文件里 2.已购商品,余额记录.第一次启动程序时需要记录工资,第二次启动程序时谈出上次余额 3.允许用户根据商品编号购买商品 4.用户选择商品后,检测是否够,够 ...

  4. phantomjs截图中文网站网页页面乱码，安装字体解决

    用phantomjs去截取中文页面的网站可能会出现乱码的情况,也就是截图中中文的位置全是方框. 解决办法就是安装字体. 在centos中执行:yum install bitmap-fonts bitm ...

  5. 分布式通信框架RMI

    1.RPC概念: Remote procedure call protocal,远程过程调用协议,一般用来实现部署在不同机器上的系统之间的方法调用, 使得程序能够像访问本地系统资源一样,通过网络传输去 ...

  6. shell学习（12）- jq

    jq命令允许直接在命令行下对JSON进行操作,包括分片.过滤.转换等 ,jq是用C编写,没有运行时依赖,所以几乎可以运行在任何系统上.预编译的二进制文件可以直接在Linux.OS X和windows系 ...

  7. 1. mybatis 的入门实例

    mybatis 的入门实例 1.创建一个普通的Java项目 1.加入jar包(所有mybatis 和mysql) 2.加入配置文件 src 目录下 (1) db.properties mysql.us ...

  8. Android点击事件（click button）的四种写法

    在学习android开发和测试的时候发现不同的人对于click事件的写法是不一样的,上网查了一下,发现有四种写法,于是想比较一下四种方法的不同 第一种方法:匿名内部类 代码: package com. ...

  9. composer.json 配置设置

    配置文件的值为 key:val 必须双引号包裹 一.配置文件 名字 name包名称由用户名名称和仓库名称组成包版本限制来请求Monolog软件包 1.0.*.这意味着1.0开发分支中的任何版本,或大于 ...

  10. 75th LeetCode Weekly Contest Champagne Tower

    We stack glasses in a pyramid, where the first row has 1 glass, the second row has 2 glasses, and so ...