微信小程序实战篇-商品详情页(一)

哈喽,大家好,今天要进入新篇章啦,商品详情页,这个可是个大模块,要分好几次才能讲解清楚,现在我们先进行第一讲,老规矩,先上效果图

![商品详情页.gif](http://upload-images.jianshu.io/upload_images/1750086-8483b91cbc858b97.gif?imageMogr2/auto-orient/strip)
有木有很酷炫啊,下面由代码君教你如何实现。

详情页布局


看效果图,可以知道详情页包含以下几个模块,banner、标题栏、选择购买栏、商品评价、商品详情、还有一个底部悬浮栏,这里比较难的是底部悬浮栏,剩下的我们之前模块我们之前就有布局过

  1. detail.wxml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!-- banner -->
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
    <swiper-item>
    <image src="{{item}}" data-src="{{item}}" bindtap="previewImage"></image>
    </swiper-item>
    </block>
    </swiper>
    <scroll-view scroll-y="true">
    <view class="detail">
    <text class="title">LANCOME兰蔻小黑瓶精华肌底液</text>
    <text class="price">¥500</text>
    </view>
    <view class="separate"></view>
    <!-- sku选择 -->
    <text bindtap="toggleDialog">请选择购买数量</text>
    <view class="separate"></view>
    <text>商品评价</text>
    <text class="text-remark">东西还可以,好评~</text>
    <view class="separate"></view>
    <text>商品详情</text>
    <block wx:for-items="{{detailImg}}" wx:key="name">
    <image class="image_detail" src="{{item}}" />
    </block>
    <view class="temp"></view>
    </scroll-view>
    <!-- 底部悬浮栏 -->
    <view class="detail-nav">
    <image bindtap="toCar" src="../../images/detail/detail_btn_cart.png" />
    <view class="line_nav"></view>
    <image bindtap="addLike" src="{{isLike?'../../images/detail/detail_btn_mark_selected.png':'../../images/detail/detail_btn_mark_normal.png'}}" />
    <button class="button-green" bindtap="addCar" formType="submit">加入购物车</button>
    <button class="button-red" bindtap="immeBuy" formType="submit">立即购买</button>
    </view>

    这里面要讲解的有

    • banner里面新加入一个东西bindtap=”previewImage”,图片预览功能,就是查看大图,至于事件是如何处理的,请查看detail.js 里的previewImage事件
    • 底部悬浮栏里面的那个收藏按钮,我们要如何做用户点击一下就更换收藏图标呐,本文是通过isLike这个Boolean值来做判断的,用户每触发一次addLike事件,就更换一次Boolean值,按钮的更换效果就实现了
  2. detail.wxss

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    page {
    display: flex;
    flex-direction: column;
    height: 100%;
    }
    /* 直接设置swiper属性 */
    swiper {
    height: 500rpx;
    }
    swiper-item image {
    width: 100%;
    height: 100%;
    }
    .detail {
    display: flex;
    flex-direction: column;
    margin-top: 15rpx;
    margin-bottom: 0rpx;
    }
    .detail .title {
    font-size: 40rpx;
    margin: 10rpx;
    color: black;
    text-align: justify;
    }
    .detail .price {
    color: red;
    font-size: 40rpx;
    margin: 10rpx;
    }
    .line_flag {
    width: 80rpx;
    height: 1rpx;
    display: inline-block;
    margin: 20rpx auto;
    background-color: gainsboro;
    text-align: center;
    }
    .line {
    width: 100%;
    height: 2rpx;
    display: inline-block;
    margin: 20rpx 0rpx;
    background-color: gainsboro;
    text-align: center;
    }
    .detail-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    float: left;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    height: 100rpx;
    }
    .button-green {
    background-color: #4caf50; /* Green */
    }
    .button-red {
    background-color: #f44336; /* 红色 */
    }
    .image_detail {
    width: 100%;
    }
    button {
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 30rpx;
    border-radius: 0rpx;
    width: 50%;
    height: 100%;
    line-height: 100rpx;
    }
    .detail-nav image {
    width: 70rpx;
    height: 50rpx;
    margin: 20rpx 40rpx;
    }
    .line_nav {
    width: 5rpx;
    height: 100%;
    background-color: gainsboro;
    }
    /* 占位 */
    .temp {
    height: 100rpx;
    }
    text {
    display: block;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 30rpx;
    margin: 10rpx;
    }
    .text-remark {
    display: block;
    font-size: 25rpx;
    margin: 10rpx;
    }

    css 样式属性

    • border-radius 设置边界圆角,设置的大小就是边角的弧度,该属性可以应该在按钮活图片上,由于加入购物车和立即购买是放在底部所以最好是直角,所以把border-radius设置为0
    • display inline-block值代表混合块和内联特性。
      盒子的外部被视为内联元素。因此,不会为元素创建新行。
      框的内部被视为块元素,并应用诸如宽度,高度和边距的属性。
    • align-items 设置了flex容器的对齐方式。一般设置为center居中
    • z-index 属性指定一个元素的堆叠顺序。如果值设置为正数,越大这对应的view也会越在上面一层,负数就是在底层,当前页面z-index 为0,所以要底部导航栏要浮在上面就把z-index 设置大于0就好
  3. detail.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    Page({
    data: {
    isLike: true,
    // banner
    imgUrls: [
    "http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg",
    "http://mz.djmall.xmisp.cn/files/product/20161201/148057922659_middle.jpg",
    "http://mz.djmall.xmisp.cn/files/product/20161201/148057923813_middle.jpg",
    "http://mz.djmall.xmisp.cn/files/product/20161201/148057924965_middle.jpg",
    "http://mz.djmall.xmisp.cn/files/product/20161201/148057925958_middle.jpg"
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔,3s
    duration: 1000, // 滑动动画时长1s

    // 商品详情介绍
    detailImg: [
    "http://7xnmrr.com1.z0.glb.clouddn.com/detail_1.jpg",
    "http://7xnmrr.com1.z0.glb.clouddn.com/detail_2.jpg",
    "http://7xnmrr.com1.z0.glb.clouddn.com/detail_3.jpg",
    "http://7xnmrr.com1.z0.glb.clouddn.com/detail_4.jpg",
    "http://7xnmrr.com1.z0.glb.clouddn.com/detail_5.jpg",
    "http://7xnmrr.com1.z0.glb.clouddn.com/detail_6.jpg",
    ],
    },
    //预览图片
    previewImage: function (e) {
    var current = e.target.dataset.src;

    wx.previewImage({
    current: current, // 当前显示图片的http链接
    urls: this.data.imgUrls // 需要预览的图片http链接列表
    })
    },
    // 收藏
    addLike() {
    this.setData({
    isLike: !this.data.isLike
    });
    },
    // 跳到购物车
    toCar() {
    wx.switchTab({
    url: '/pages/cart/cart'
    })
    },
    // 立即购买
    immeBuy() {
    wx.showToast({
    title: '购买成功',
    icon: 'success',
    duration: 2000
    });
    },
    })

    介绍几个系统API的接口

    • wx.previewImage 图片预览功能
      • current 传入当前图片路径
      • urls 图片数组urls
    • wx.showToast
      Toast 吐司,做前端都知道,这个是一定会用到的,就是弹出半透明框,和用户进行交互,wx.showToast调用很简单,
      • title 就是你要提示用户的内容,
      • icon,目前只支持”success”、”loading”两个属性,
      • image 自定义图片,如果设置了image图片就会顶替掉icon的图片
      • mask 是否显示透明蒙层,换句话说就是设置当Toast显示的时候,用户可不可以点击其他按钮,默认是不显示透明蒙层
    • wx.switchTab 跳转到购物车界面,详解请看下面的知识小课堂

知识小课堂


  1. css样式的复用:@import “tab/tab.wxss”;

    最近遇到一个问题,就是同一个页面有用到别的页面的样式,这时候最笨的方式是,把别的页面的样式拷贝过来,但是这样会导致代码冗余量太大,还有一个是写在app.wxss里面,这个大家都可以共用,但是这个也不太好就是,所有有用到复用的就全写在app.wxss,这样会导致该样式过于臃肿,不利于代码的阅读,这时候@import,就派上用场了,只需要在xxx.wxss页面加入@import “tab/tab.wxss”;这样你就可以引用tab.wxss里面类的属性了

  2. 几个界面跳转的区分

    • wx.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面
    • wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面
    • wx.switchTab(OBJECT) 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
    • wx.navigateBack(OBJECT) 关闭当前页面,返回上一页面或多级页面。
      通过上面的解释,我们可以知道,我们底部悬浮栏中购物车的跳转应该用wx.switchTab,因为他是要跳转到购物车tab页面

总结


今天讲解的内容有点多,大家回去好好消化吧,反正我要说的是,详情页的知识点是个大头,丝毫不逊色与首页的内容,提前穿插一些知识点,方便下一节的深入讲解,好了,今天就到这,祝大家周末愉快~


1.如果本文帮到了您,不妨点一下右下角的 分享到 按钮。
2.除非注明,本博文章均为原创,转载请以链接形式标明本文地址。
3.本博文章只代表博主当时的观点或结论,与博主公司没有任何关系。