微信小程序商城项目实战(第四篇:商品详情页)

实现商品详情页

json里边设置一下页面标题"navigationBarTitleText": "商品详情"

界面组成

上方由一个轮播图展示，
中间为商品信息，后台会返回图文详情富文本，前台只需赋值
下方固定一个工具栏

• 客服
• 分享
• 购物车
• 添加购物车
• 立即购买

界面编写

分享是将一个按钮隐藏且将其定位在分享处,客服也是一样的
加入购物车:如果已经加入则提示已经加入…

<!--pages/goods_detail/goods_detail.wxml-->
<view>
    <view class="index_swiper">
    <swiper indicator-dots autoplay circular>
      <swiper-item wx:for="{
  {detailList.pics}}" wx:key="*this">
      <navigator bindtap="preview" data-src="{
  {item.pics_mid}}">
        <image src="{
  {item.pics_mid}}" mode="widthFix" />
      </navigator>
      </swiper-