LOGO logo

需求 开发 交付;每一步修改到满意后在付款。

下载到桌面 免费获取解决方案
当前位置: 网站建设/ 微信小程序制作/ 微信小程序制作分享商城中商品详情页设计及代码

微信小程序制作分享商城中商品详情页设计及代码

日期:2021-04-21 13:53 浏览量:4839

微信小程序制作分享商城中商品详情页设计及代码,商城详情功能包括:顶部轮播图(点击可查看大图),商品基本信息,商品评价展示,商品详情介绍,加入购物及立即购买功能。


商品详情


wxml:

<swiper class="m1" indicator-dots="true" indicator-active-color="#fff" autoplay="true" interval="3500"
  style="height:{{windowWidth + 'px'}}">
  <swiper-item>
    <image src="/image/a2.jpg" mode="aspectFill" bindtap="previewImage"></image>
  </swiper-item>
  <swiper-item>
    <image src="/image/a3.jpg" mode="aspectFill" bindtap="previewImage"></image>
  </swiper-item>
</swiper>

<view class="m2">
  <view class="v1">标题标题标题标题标题题标题</view>
  <view class="v2">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</view>
  <view class="v3">
    <view class="z"><text class="t1">¥</text>38.5<text class="t2">/1.5kg</text></view>
    <text class="y">已售 4521</text>
  </view>
</view>

<view class="bg-bank" style="margin-top:10px;"></view>

<navigator class="m3" url="" hover-class="none">
  <text class="t1">商品评价(78)</text>
  <image src="/image/a5.png"></image>
</navigator>
<view class="m4">
  <view class="user">
    <image src="/image/a1.jpg"></image>
    <view class="name">
      <view class="t">
        <text class="z">张三</text>
        <text class="y">2020.12.10 10:25</text>
      </view>
      <view class="fen">
        <van-rate value="{{5}}" size="{{16}}" color="#ffca01" void-color="#eee" void-icon="star" readonly />
      </view>
    </view>
  </view>
  <view class="content">评价的内容评价的内容评价的内容评价的内容评价的内容</view>
  <view class="img">
    <image src="/image/a1.jpg" mode="aspectFill" bindtap='imgView' data-url="/image/a1.jpg"></image>
    <image src="/image/a1.jpg" mode="aspectFill" bindtap='imgView' data-url="/image/a1.jpg"></image>
    <image src="/image/a1.jpg" mode="aspectFill" bindtap='imgView' data-url="/image/a1.jpg"></image>
  </view>
  <view class="reply">
    <text>回复:</text>回复内容回复内容回复内内容
  </view>
</view>

<view class="m5">
  <navigator url="" hover-class="none">查看全部评价</navigator>
</view>

<view class="bg-bank" style="margin-top:10px;"></view>

<view class="m6">
  <rich-text class="content" type="text" nodes="{{content}}"></rich-text>
</view>


<van-goods-action>
  <van-goods-action-icon icon="shop-o" text="首页" url="/pages/index/index" link-type="switchTab" />
  <van-goods-action-icon icon="cart-o" text="购物车" info="5" url="/pages/cart/index" link-type="switchTab" />
  <van-goods-action-icon icon="chat-o" text="客服" open-type="contact" />
  <van-goods-action-button color="linear-gradient(to right, #b2d22c, #72ba26)" text="加入购物车" />
  <van-goods-action-button color="#22991e"  text="立即购买" />
</van-goods-action>


wxss样式:

.m1{background:#fff;width:100%;overflow:hidden;}
.m1 swiper-item{width:100%;height:100%;}
.m1 swiper-item image{width:100%;height:100%;display:block;}

.m2{width:auto;margin:16px 15px 0px;overflow: hidden;}
.m2 .v1{width:100%;font-size:18px;color:#000;font-weight: 500;}
.m2 .v2{width:100%;margin-top:5px;font-size:12px;color:#898989;}
.m2 .v3{width:100%;margin-top:10px;height:30px;line-height: 30px;}
.m2 .v3 .z{width:auto;float:left;font-size:24px;font-weight: 500;color:#e3554b;}
.m2 .v3 .z .t1{font-size:12px;}
.m2 .v3 .z .t2{font-size:12px;font-weight: 500;}
.m2 .v3 .y{float:right;font-size:12px;color:#898989;}


.m3 {display:block;width:auto;height:44px;background:#fff;padding:0px 10px 0px 15px;line-height:44px;}
.m3 .t1 {color:#444;font-size:15px;font-weight: bold;}
.m3 image {width:20px;height:20px;margin-top:16px;margin-left:7px;float:right;}

.m4{width: auto;height:auto;overflow: hidden;background: #fff;padding:0px 15px 0px;}
.m4:last-child{margin-bottom: 20px;}
.m4 .user{display: flex;flex-direction: row;}
.m4 .user image{width: 35px;height: 35px;border-radius: 50%;}
.m4 .user .name{flex:1;margin-left:10px;}
.m4 .user .name .t{width: 100%;height: auto;overflow: hidden;line-height:34px;height:26px;}
.m4 .user .name .t .z{font-size: 14px;color:#222;font-weight: 500;}
.m4 .user .name .t .y{font-size: 12px;color:#898989;float:right;}
.m4 .user .name .fen{width: 100%;font-size: 12px;color:#666;margin-top:3px;}
.m4 .user .name .fen multiple-rate{display: inline-block}
.m4 .content{width: auto;height: auto;overflow: hidden;font-size: 12px;color: #222;margin-top:3px;margin-left:45px;}
.m4 .img{width:auto;overflow: hidden;margin-top:5px;margin-left:45px;}
.m4 .img image{width:50px;height:50px;border-radius:3px;margin-right:5px;}
.m4 .reply{width: auto;padding-left: 5px;height: auto;overflow: hidden;font-size: 12px;color: #999;margin-top:5px;padding-top:5px;background:#f5f5f5;border-radius: 5px;padding:10px;margin-left:45px;line-height:20px;}
.m4 .reply text{color:#009e27;}

.m5{width:100%;overflow: hidden;text-align:center;margin-top:10px;}
.m5 navigator{display:inline-block;width:120px;height:34px;border:1px solid #ababab;line-height:34px;text-align:center;color:#222;font-size:12px;border-radius: 50px;}

.m6{width:auto;background:#fff;overflow:hidden;margin-bottom:50px;}


热门文章
友情链接