<view class="bgGray">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorcolor}}" indicator-active-color="{{indicatorActive}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" mode="widthFix"/>
</swiper-item>
</block>
</swiper>
<div class="space10"></div>
<view class="defaultList">
<view class="list flex align rightNav">
<view class="icon item"><image mode="widthFix" src="../../image/icon_home_top_water-full@3x.png"></image></view>
<view class="text item">产品名称</view>
<view class="text fullother">鱼鹰3号金色版</view>
</view>
<view class="list flex align rightNav" bindtap='showdetail'>
<view class="icon item"><image mode="widthFix" src="../../image/icon_buy_left_product@3x.png"></image></view>
<view class="text item">产品详情</view>
<view class="text fullother">点击展开<image mode="widthFix" src="../../image/icon_buy_right_arrow@3x.png" class="rowimg {{showdetail==true ? 'change':''}}"></image></view>
</view>
</view><!--defaultList-->
<view class="detailBox" wx:if="{{showdetail}}">
<view class='border-bottom'></view>
<view class='dataList'>
<view class='list'>设备名称:<text>鱼鹰8号</text></view>
<view class='list'>设备版本:<text>金色版本</text></view>
<view class='list'>设备编号:<text>DF234</text></view>
<view class='list'>商品价格:<text class='statu2'>254.00</text></view>
<view class='list'>其他规格:<text>规格内容</text></view>
</view><!-- dataList -->
</view><!-- detailBox -->
<div class="space10"></div>
<view class="defaultList">
<view class="list flex align inputItem">
<view class="icon item"><image mode="widthFix" src="../../image/icon_buy_left_portrait@3x.png"></image></view>
<view class="text item"> <input placeholder="请填写收货人姓名"/></view>
</view>
<view class="list flex align inputItem">
<view class="icon item"><image mode="widthFix" src="../../image/icon_buy_left_phone@3x.png"></image></view>
<view class="text item"> <input placeholder="请填写收货人电话"/></view>
</view>
<view class="list flex align inputItem">
<view class="icon item"><image mode="widthFix" src="../../image/icon_buy_left_address@3x.png"></image></view>
<view class="text item"> <input placeholder="请填写收货人地址"/></view>
</view>
<view class="list flex align inputItem">
<view class="icon item"><image mode="widthFix" src="../../image/icon_buy_left_time@3x.png"></image></view>
<view class="inputBox item" style="text-align: left;margin-left: 10px;">
<picker mode="date" value="{{thisdate}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">{{thisdate}}</view>
</picker>
</view>
</view>
</view><!--defaultList-->
<view class="space60"></view>
</view>
<view class="flex align between bottomBox">
<view class="item btn1">
<image mode="widthFix" src="../../image/icon_buy_left_advisory@3x.png"></image><span>立即咨询</span>
</view>
<view class="item btn2">立即预定(￥200.00)</view>
</view>
|
swiper image{
width: 100%;
display: block;
}
.defaultList{
margin: 0 0;
}
.price{
font-weight: bold;
}
.rowimg.change{
transition: all 0.3s;
transform: rotate(180deg)
}
|
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
showdetail:false,
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 1000,
indicatorcolor:"rgba(0,0,0,0.5)",
indicatorActive:'#2c98ef',
thisdate: '2016-09-01',
time: '12:01'
},
bindDateChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
showdetail:function(){
this.setData({
showdetail: !this.data.showdetail
})
}//showdetail
})
|
模板简介：该模板名称为【微信小程序宏华净水顶部幻灯产品详情页设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
