本文给大家带来的是微信小程序运动鞋商品详细介绍页样式设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/product/productDetail/productDetail.wxml-->
<view class="container greybg">
<!-- <view class="m-indexHd" style="height: 102rpx;">
<view class="m-hd g-row">
<view class="m-indextop">
<view class="top-line">
<view class="logo"></view>
<view class="m-searchTop">
<navigator url="../search/search" hover-class="changestyle">
<view class="zw-search-link">
<view class="icon-search"></view>
<text class="placeholder">点击输入搜索商品</text>
</view>
</navigator>
</view>
</view>
</view>
</view>
</view> -->
<view class="zw-banner detail-swiper">
<swiper indicator-dots="{{indicatorDots}}" indicator-color="{{indicatorColor}}" circular="{{circular}}" indicator-active-color="{{indicatorActiveColor}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<navigator url="../product/productDetail/productDetail" hover-class="changestyle">
<image src="{{item}}" class="slide-image" width="750" height="376" />
</navigator>
</swiper-item>
</block>
</swiper>
</view>
<view class="dt-section">
<view class="m-detailBase">
<view class="info">
<view class="name">Camel骆驼运动跑鞋 男女休闲透气运动鞋 轻便耐磨跑步鞋</view>
<view class="desc">中国田径协会马拉松赛指定款 竞速级跑步体验</view>
<view class="price">￥140.00</view>
<!-- <view class="taglist">
<view class="wrap"></view>
</view> -->
</view>
<view class="comment collet">
<view class="wrap">
<i class="icon ion-ios-star-outline"></i>
<view class="more">
<text>收藏</text>
</view>
</view>
</view>
</view>
</view>
<view class="dt-section-2">
<view class="m-listItem">
<view class="left">
<text class="txt">请选择规格数量</text>
</view>
<view class="middle"></view>
<view class="right">
<i class="icon ion-ios-arrow-right"></i>
</view>
</view>
<view class="m-listItem m-li-noborder">
<view class="left">
<text class="txt">服务：</text>
</view>
<view class="middle">
<view class="m-serversEntry">
<view class="mse-wrap">
<view class="item">保价服务</view>
<view class="item">100%正品保障</view>
</view>
<view class="mse-wrap">
<view class="item">59元包邮</view>
<view class="item">七天无理由退换</view>
</view>
</view>
</view>
<view class="right">
<i class="icon ion-ios-arrow-right"></i>
</view>
</view>
</view>
<view class="dt-section-2 dt-section-3 dt-comment">
<view class="m-listItem">
<view class="left">
<text class="txt">用户评价(999)</text>
</view>
<view class="middle"></view>
<view class="right">
<i class="icon ion-ios-arrow-right"></i>
</view>
</view>
<view class="comment-item">
<view class="comment-hd">
<view class="link">
<image class="avatar" src="https://img02.camel.com.cn/image/headportrait345.png" alt=""></image>
<text class="name">匿名***</text>
</view>
</view>
<view class="extraInfo">
<text class="time">2017年09月19日 17:54:00</text>
<text class="skus">女,粉红38</text>
</view>
<view class="content">
<p class="txt">物有所值，希望大家购买，穿着十分轻便、透气，优良鞋底很厚，鞋子是正品，鞋底防滑效果不错，价格也便宜，是运动健身很好的选择，推荐给大家放心、舒心、安心的购买</p>
</view>
<view class="commentPics">
<ul class="list"></ul>
</view>
</view>
</view>
<view class="dt-section-2 de-content">
<view class="deitalInfos">
<view class="m-attrCon">
<view class="attrList">
<view class="tt">商品参数</view>
<view class="item">
<view class="left">货号</view>
<view class="right">
<view class="con">A712357085</view>
</view>
</view>
</view>
</view>
<image src="https://img01.camel.com.cn/product/detail/A712357085/7b743ca4-54fe-408a-aeb6-380603f20c73.jpg" alt="" mode="widthFix"></image>
</view>
<view class="m-commonIssues m-rmcdGoods">
<view class="tt">
<view class="line"></view>
<span class="text">大家都在看</span>
</view>
<view class=""></view>
</view>
</view>
<view class="m-btnGroup">
<view class="inner">
<view class="btn btn1">
<i class="icon icon-kefu ion-ios-chatbubble-outline"></i>
</view>
<view class="btn btn2">立即购买</view>
<view class="btn btn3">加入购物车</view>
</view>
</view>
</view>
|
二、js页面代码如下：
// pages/product/productDetail/productDetail.js
Page({
data: {
imgUrls: [
'https://img01.camel.com.cn/product/image/A712357085/6fb33911-3ca6-4487-87b0-ce954573b6dd.jpg',
'https://img01.camel.com.cn/product/image/A712357085/c8568bbd-5fcf-4c15-b143-f8e022ddbc18.jpg',
'https://img01.camel.com.cn/product/image/A712357085/e9e1b0dc-c431-486a-a410-5dcd1c6b7c21.jpg'
],
indicatorDots: true,
indicatorColor: '#fff',
indicatorActiveColor: '#d2ab44',
autoplay: true,
interval: 5000,
duration: 500,
circular: true
}
})
|
.jpg)
.jpg)
