//index.axml
<!-- 最外層視圖 無意義 -->
<!-- -->
<view class="content">
<view class="conent">
<!-- 支付寶喚起支付 -->
<button type="default" onTap="payment">支付寶支付</button>
<!-- 獲取用戶信息 -->
<!-- <button type="default" onTap="getuserInfo">獲取用戶信息</button> -->
<!-- -->
</view>
<view class='conts'>
<!-- 第一層 -->
<swiper
class='swiper_view'
indicator-dots="true"
vertical="{{vertical}}"
autoplay="{{autoplay}}"
duration="{{duration}}"
interval='{{interval}}'
bindchange="bindchange"
circular="{{circular}}"
>
<block a:for='{{imgList}}' a:key="{{index}}">
<swiper-item>
<image
src="{{item}}"
data-id='{{index}}'
class="slide-image"
bindload="imageLoad"
/>
</swiper-item>
</block>
</swiper>
<!-- 第二層 -->
<view class="car_title">
<label>熱銷車型</label>
<text>更多></text>
</view>
<!-- 外層視圖容器 -->
<view class="section">
<!-- scroll視圖容器 -->
<scroll-view class="scroll_view" scroll-x="true">
<!-- 滾動列表內容 -->
<view class="cont" a:for="{{list}}" a:key="{{item}}">
<!-- 滾動圖片 -->
<image src="{{item.url}}"class="cont_img"/>
<!-- 滾動文本 -->
<view class="content">
<view class="cont_name" >{{item.title}}</view>
<view class="cont_title">
<view class="area">{{item.name}}</view>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 第三層 -->
<view class="car_title">
<label>限時促銷</label>
<text>更多></text>
</view>
<view class='time_car'>
<view class='time_cont'>
<image a:for="{{list}}" a:key="{{item}}" src="{{item.url}}"class="carimg"/>
</view>
</view>
<!-- 第四層 -->
<view class="car_title">
<label>店內促銷</label>
<text>更多></text>
</view>
<view class="list" a:for="{{lists}}" a:key="{{index}}">
<!-- 列表標題 -->
<text class="list_name">{{item.title}}</text>
<!-- 列表商品圖片 -->
<image class="list_img" src="{{item.image}}"></image>
<!-- 規格 -->
<text class="cart_g_name">規格 : {{item.pro_name}}</text>
<!-- 價格 -->
<!-- <text class="list_price">詢問價格</text> -->
</view>
<!-- 第三層 -->
</view>
</view>
//index.acss
.content{
position: relative;
width: 100%;
}
.swiper_view{
position: relative;
width: 100%;
height:400rpx;
background-color: antiquewhite;
}
.slide-image{
width:100%;
height:100%;
}
.time_car{
position: relative;
width: 100%;
text-align: center;
}
.carimg{
width:47%;
display:inline-block;
height:235rpx;
float: left;
margin:8rpx 7rpx;
}
.time_cont{
position: relative;
width: 93%;
display: inline-block;
}
/* 列表 */
.list{
position: relative;
width: 100%;
height: 185rpx;
/* background-color: red; */
border-bottom: 1rpx solid #e9e9e9;
}
/* 列表商品圖片 */
.list_img{
position: absolute;
border-radius: 10rpx;
top: 20rpx;
left: 40rpx;
width: 144rpx;
height: 144rpx;
}
/* 列表規格 */
.cart_g_name{
position: absolute;
left: 235rpx;
font-size: 26rpx;
color: #aaa;
top: 75rpx;
}
/* 列表商品名稱 */
.list_name{
position: absolute;
left: 235rpx;
top: 30rpx;
width: 300rpx;
/* background-color: red; */
font-size: 30rpx;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
/* 列表商品價格 */
.list_price{
position: absolute;
font-size: 32rpx;
color: #D66058;
left: 235rpx;
bottom: 20rpx;
}
.car_title{
position: relative;
width:100%;
height: 80rpx;
line-height: 80rpx;
}
.car_title label{
padding-left: 30rpx;
font-weight: bold;
font-size: 30rpx;
}
.car_title text{
position: absolute;
right: 30rpx;
font-size: 30rpx;
color: #999;
}
/* 輪播外層視圖 */
.section {
width: 100%;
height: 350rpx;
text-align: center;
}
/* 輪播視圖 */
.scroll_view {
height: 350rpx;
display: inline-block;
width: 94%;
text-align: center;
white-space: nowrap;
}
/* 輪播圖片內容視圖 */
.cont {
width: 230rpx;
margin: 5rpx;
height: 350rpx;
display: inline-block;
text-align: center;
}
/* 輪播圖片大小 */
.cont_img {
width: 225rpx;
border-radius: 10rpx;
height: 225rpx;
text-align: center;
display: block;
}
/* 標題暱稱 */
.cont_name {
margin-top: 20rpx;
display: -webkit-box;
font-size: 28rpx;
text-align: center;
color: rgb(204, 45, 45);
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-line;
}
/* title */
.cont_title {
width: 240rpx;
text-align: center;
display: inline-block;
height: 40rpx;
font-size: 28rpx;
}
//index.js
Page({
data:{
imgList: [
'http://img2.cheping.com.cn/model/22517/OYnUjcSNDRMxxCFy.jpg',
'http://img3.cheping.com.cn/model/22549/LptmOnVCOVouXCEN.jpg',
'http://img.xgo-img.com.cn/pics/1865/630/441/1864075.jpg'
],
lists: [{
id: 1,
title: '啓程250',
image: 'http://img2.cheping.com.cn/model/22517/OYnUjcSNDRMxxCFy.jpg',
pro_name: "30ml",
num: 1,
price: 180,
selected: true
},
{
id: 2,
title: '啓程250',
image: 'http://img3.cheping.com.cn/model/22549/LptmOnVCOVouXCEN.jpg',
pro_name: "25g",
num: 1,
price: 62,
selected: true
},
{
id: 2,
title: '啓程250',
image: 'http://img2.cheping.com.cn/model/22517/OYnUjcSNDRMxxCFy.jpg',
pro_name: "75ml",
num: 1,
price: 175,
selected: true
}
], indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
// 滾動數據
list: [{
url: "http://img2.cheping.com.cn/model/22517/OYnUjcSNDRMxxCFy.jpg",
name: "啓辰D60",
title: "6.98-11.18萬",
},
{
url: "http://img3.cheping.com.cn/model/22549/LptmOnVCOVouXCEN.jpg",
name: "啓辰T70",
title: "8.98-12.78萬",
},
{
url: "http://img.xgo-img.com.cn/pics/1865/630/441/1864075.jpg",
name: "啓辰T60",
title: "8.58-11.88萬",
}
],
//是否採用銜接滑動
circular: true,
//是否顯示畫板指示點
indicatorDots: false,
//選中點的顏色
indicatorcolor: "#000",
//是否豎直
vertical: false,
//是否自動切換
autoplay: true,
//自動切換的間隔
interval: 2500,
//滑動動畫時長毫秒
duration: 100,
//所有圖片的高度
imgheights: [],
//圖片寬度
imgwidth: 750,
//默認
current: 0
},
imageLoad: function (e) {//獲取圖片真實寬度
var imgwidth = e.detail.width,
imgheight = e.detail.height,
//寬高比
ratio = imgwidth / imgheight;
console.log(imgwidth, imgheight)
//計算的高度值
var viewHeight = 750 / ratio;
var imgheight = viewHeight;
var imgheights = this.data.imgheights;
//把每一張圖片的對應的高度記錄到數組裏
imgheights[e.target.dataset.id] = imgheight;
this.setData({
imgheights: imgheights+'rpx'
})
},
bindchange: function (e) {
// console.log(e.detail.current)
this.setData({ current: e.detail.current })
},
// 支付寶小程序支付函數
payment() {
// 這裏調用支付寶喚起支付
my.tradePay({
tradeNO: '201711152100110410533667792', // 調用統一收單交易創建接口(alipay.trade.create),獲得返回字段支付寶交易號trade_no
success: (res) => {
my.alert({
content: JSON.stringify(res),
});
},
fail: (res) => {
my.alert({
content: JSON.stringify(res),
});
}
});
},
// 獲取用戶信息【注意這裏關聯應用纔可以授權獲取】
getuserInfo(){
my.getAuthCode({
scopes: 'auth_user',
success: (res) => {
my.getAuthUserInfo({
success: (userInfo) => {
my.alert({
content: userInfo.nickName
});
my.alert({
content: userInfo.avatar
});
}
});
},
});
},
onShareAppMessage() {
// 返回自定義分享信息
return {
title: 'My App',
desc: 'My App description',
path: 'pages/index/index',
};
},
});