版权声明:菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/87455444
//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',
};
},
});