小程序微信小程序小程序学习

微信小程序实战篇-商品详情页（一）

2017-06-30  本文已影响2949人  代码君_Coder

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

商品详情页.gif

有木有很酷炫啊，下面由代码君教你如何实现。

详情页布局

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

  1. detail.wxml
<!-- 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>

这里面要讲解的有

  1. detail.wxss
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 样式属性

  1. detail.js
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的接口

知识小课堂

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

总结

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

上一篇：微信小程序实战篇-分类页面制作

下一篇：微信小程序实战篇-商品详情页（二）

建了一个小程序技术交流群，想入群的读者请加微信
小程序入群.png
上一篇下一篇

猜你喜欢

热点阅读