本文给大家带来的是微信小程序幻灯切换商品详情页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<view>
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
</view>
<view class="goods_infor_top">
<view class="goods_title">
木村耀司登山旅行大学生户外情侣双肩背包外带小背包
<view class="goods_collect_btn" bindtap="collect">
<view wx:if="{{iscollect}}">
<image src="../../image/icon-aixin.png" class="goods_collect_img"></image>
</view>
<view wx:else>
<image src="../../image/icon-aixin1.png" class="goods_collect_img"></image>
</view>
<text wx:if="{{iscollect}}">已收藏</text>
<text wx:else>收藏</text>
</view>
</view>
<view class="goods_price">
<text>¥169</text>
<text class="goods_old_price">¥269</text>
</view>
<view class="goods_deliver">
*本产品由 品牌商 提供发货服务。
</view>
</view>
<view class="goods_infor_pre">
<view class="goods_infor_txt">
<view class="goods_infor_brand"></view>
<text>蜜蜂从植物的花中采取含水量约为75%的花蜜或分泌物，存入自己第二个胃中，在体内多种转化的作用下，经过15天左右反复酝酿各种维生素、矿物质和氨基酸丰富到一定的数值时，同时把花蜜中的多糖转变成人体可直接吸收的单糖葡萄糖、果糖，水分含量少于23%存贮到巢洞中，用蜂蜡密封。</text>
</view>
</view>
<view class="goods_infor_raw">
<view class="goods_infor_item">
<text>【品 牌】</text>蜂之堂
</view>
<view class="goods_infor_item">
<text>【产 地】</text>湖南长沙
</view>
<view class="goods_infor_item">
<text>【净 含 量】</text>300g/罐
</view>
<view class="goods_infor_item">
<text>【保 质 期】</text>12月
</view>
<view class="goods_infor_item">
<text>【生产日期】</text>2016/11/23
</view>
<view class="goods_infor_item">
<text>【储蓄方法】</text>低温避光存储
</view>
<view class="goods_infor_item">
<text>【适用人群】</text>老少皆宜
</view>
<view class="goods_infor_item">
<text>【食用方法】</text>直接食用或兑水
</view>
<view class="goods_infor_item">
<text>【温馨提示】</text>请使用60度一下温水
</view>
</view>
<view class="goods_detail">
<view class="goods_detail_title">商品详情</view>
<view>
<image bindload="cusImageLoad" src="../../image/IMG_0466.jpg" style="width:{{imageWidth}};height:{{imageHeight}}"></image>
</view>
</view>
<view class="goods_bottom"></view>
<view class="goods_bottom_btn">
<view>
<view class="goods_one">
<view class="goods_car_num">
<span>0</span>
</view>
</view>
<view class="goods_half_half red">前往商城</view>
<view class="goods_half_half blue">加入购物车</view>
<view class="goods_half_half green">前往付款</view>
</view>
</view>
|
二、wxss样式文件代码如下：
.swiper-item{
display: block;
}
.slide-image {
width: 100%;
}
swiper {
width: 100%;
}
.goods_title {
font-size: 14px;
line-height: 20px;
color: #535353;
padding: 10px;
height: 40px;
padding-right: 80px;
position: relative;
}
.goods_infor_top {
background-color: #FFF;
}
.goods_price {
padding: 10px;
font-size: 16px;
color: #FF0000;
}
.goods_old_price {
margin-left: 10px;
font-size: 12px;
text-decoration: line-through;
color: #535353;
}
.goods_deliver {
padding: 10px;
border-top: 1px solid #E5E5E5;
font-size: 10px;
color: #676767;
}
.goods_collect_btn {
height: 40px;
width: 70px;
position: absolute;
right: 0;
top: 10px;
border-left: 1px solid #E5E5E5;
text-align: center;
font-size: 12px;
line-height: 14px;
}
.goods_collect_img {
width: 24px;
height: 24px;
}
.goods_infor_pre {
margin-top: 10px;
background-color: #FFF;
padding: 10px;
min-height: 40px;
}
.goods_infor_txt {
position: relative;
padding-left: 50px;
font-size: 13px;
line-height: 18px;
}
.goods_infor_brand {
position: absolute;
width: 40px;
height: 40px;
background-image: url(../../image/brand.png);
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: center;
left: 0px;
top: 10px;
}
.goods_infor_raw {
margin-top: 10px;
background-color: #FFF;
padding: 10px;
}
.goods_infor_item {
font-size: 13px;
line-height: 18px;
}
.goods_infor_item text {
display: inline-block;
width: 90px;
}
.goods_detail {
padding: 0 10px;
margin-top: 10px;
background-color: #FFF;
}
.goods_detail_title {
padding: 10px 0;
font-size: 14px;
}
.goods_bottom {
height: 50px;
}
.goods_bottom_btn {
position: fixed;
width: 100%;
bottom: 0;
height: 50px;
z-index: 99;
background-color: #FFF;
border-top: 1px solid #E5E5E5;
}
.goods_one {
width: 25%;
float: left;
height: 50px;
}
.goods_half_half {
width: 25%;
float: left;
height: 50px;
font-size: 12px;
line-height: 50px;
text-align: center;
color: #FFF;
}
.red {
background-color: #FFA500;
}
.green {
background-color: #69C3AA;
}
.blue {
background-color: #00aaef;
}
.goods_car_num {
width: 30px;
height: 30px;
margin: 0 auto;
margin-top: 10px;
font-size: 10px;
background-image: url(../../image/car1.png);
background-size: 26px;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.goods_car_num span {
position: absolute;
right: -5px;
display: inline-block;
width: 14px;
height: 14px;
border-radius: 14px;
background-color: #FF0000;
color: #FFF;
text-align: center;
line-height: 14px;
}
|
三、js页面代码如下：
var WxAutoImage = require('../../js/detailImage.js');
var app = getApp();
Page({
data: {
imgUrls: [
'../../image/swiper1.jpg',
'../../image/swiper1.jpg',
'../../image/swiper1.jpg'
],
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 3000,
duration: 1200,
iscollect: true
},
collect: function(){
this.setData({
iscollect: !this.data.iscollect
})
console.log(this.data.iscollect);
},
cusImageLoad: function(e){
var that = this;
that.setData(WxAutoImage.wxAutoImageCal(e));
}
})
|
.jpg)
.jpg)
