本文给大家带来的是微信小程序花王纸尿裤商品详情页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container">
<view>
<swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{goodsPicsInfo}}">
<swiper-item>
<image src="{{item.picurl}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
</view>
<view class="shopping_container">
<view class="title">{{shopppingDetails.title}}</view>
<view class="reason">{{shopppingDetails.reason}}</view>
</view>
<view>
<view></view>
</view>
</view>
|
二、wxss样式文件代码如下:
page{
background-color: #fff;
font-size: 14px;
}
.swiper_box {
width: 100%;
height: 320px;
}
.swiper_box .slide-image{
width: 100%;
height: 100%;
display: inline-block;
overflow: hidden;
}
.shopping_container{
padding: 0 30rpx;
}
.shopping_container .title{
margin: 20rpx 0;
font-weight: bold;
color: #333;
}
.shopping_container .reason{
margin: 20rpx 0;
color: #939393;
line-height: 22px;
}
|
三、js页面代码如下:
var app = getApp()
Page({
data: {
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 3000,
duration: 1200,
shopppingDetails: {
'title': '日本花王Merries妙而舒纸尿裤 S82片/包',
'reason': '日本原装进口腰贴式纸尿裤,温柔呵护宝宝娇嫩的小屁屁。点状设计,透气性更强;凹凸构造与防漏护围,紧紧锁定软便稀便不侧漏。备受亚洲妈妈青睐。新旧包装随机发'
}
},
onLoad: function(options) {
/*var that = this
// 商品详情
wx.request({
url: 'http://huanqiuxiaozhen.com/wemall/goods/inqgoods?id=' + options.id,
method: 'GET',
data: {},
header: {
'Accept': 'application/json'
},
success: function(res) {
//console.log(res.data.data);
that.data.shopppingDetails = res.data.data;
var goodsPicsInfo = [];
var goodsPicsObj = {};
var goodspic = res.data.data.goodspics;
var goodspics = goodspic.substring(0, goodspic.length - 1);
var goodspicsArr = goodspics.split("#");
for (var i = 0; i < goodspicsArr.length; i++) {
goodsPicsInfo.push({
"picurl": goodspicsArr[i]
});
}
that.setData({
goodsPicsInfo: goodsPicsInfo
})
}
})*/
this.setData({
goodsPicsInfo: [
{picurl: 'http://image.huanqiuxiaozhen.com/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/2017_3_21_1490082693869'},
{picurl: 'http://image.huanqiuxiaozhen.com/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/2017_3_21_1490082697446'}
]
});
}
})
|