@@ -15,7 +15,8 @@ Component({ | |||||
* 组件的初始数据 | * 组件的初始数据 | ||||
*/ | */ | ||||
data: { | data: { | ||||
bannerUrl: imgurl.banner.url | |||||
bannerUrl: imgurl.banner.url, | |||||
currentIndex: 0 | |||||
}, | }, | ||||
/** | /** | ||||
@@ -39,6 +40,11 @@ Component({ | |||||
url: `/pages/bannerdetail/index?id=${e.currentTarget.dataset.id}` | url: `/pages/bannerdetail/index?id=${e.currentTarget.dataset.id}` | ||||
}); | }); | ||||
} | } | ||||
} | |||||
}, | |||||
handleChange: function (e) { | |||||
this.setData({ | |||||
currentIndex: e.detail.current | |||||
}) | |||||
}, | |||||
} | } | ||||
}); | }); |
@@ -1,9 +1,16 @@ | |||||
<view wx:if="{{list.length>0}}" class="index-slide-view"> | <view wx:if="{{list.length>0}}" class="index-slide-view"> | ||||
<swiper class="index-slide" autoplay="true" circular="false"> | |||||
<!-- <swiper class="index-slide" autoplay="true" circular="false"> | |||||
<block wx:for="{{list}}" wx:key="unique"> | <block wx:for="{{list}}" wx:key="unique"> | ||||
<swiper-item> | <swiper-item> | ||||
<image data-id="{{item.id}}" data-data="{{item}}" mode='widthFix' bindtap='gotobannerdetail' src="{{item.coverImg}}" class="index-slide-image" /> | <image data-id="{{item.id}}" data-data="{{item}}" mode='widthFix' bindtap='gotobannerdetail' src="{{item.coverImg}}" class="index-slide-image" /> | ||||
</swiper-item> | </swiper-item> | ||||
</block> | </block> | ||||
</swiper> --> | |||||
<swiper class="imageContainer" bindchange="handleChange" previous-margin="70rpx" next-margin="70rpx" circular autoplay> | |||||
<block wx:for="{{list}}" wx:key="{{index}}"> | |||||
<swiper-item class="item"> | |||||
<image class="itemImg {{currentIndex == index ? 'active': ''}}" src="{{item.coverImg}}"></image> | |||||
</swiper-item> | |||||
</block> | |||||
</swiper> | </swiper> | ||||
</view> | </view> |
@@ -1,10 +1,9 @@ | |||||
.index-slide-view { | |||||
/* .index-slide-view { | |||||
position: relative; | position: relative; | ||||
width: 750rpx; | width: 750rpx; | ||||
height: 258rpx; | height: 258rpx; | ||||
overflow: hidden; | overflow: hidden; | ||||
margin: 0 auto; | margin: 0 auto; | ||||
/* border-radius:16rpx; *//* box-shadow: 0 6px 20px 0 rgba(0,0,0,0.15); */ | |||||
} | } | ||||
.index-slide, swiper-item | .index-slide, swiper-item | ||||
@@ -49,4 +48,33 @@ | |||||
.bannerbg image { | .bannerbg image { | ||||
display: block; | display: block; | ||||
width: 100%; | width: 100%; | ||||
} */ | |||||
.imageContainer{ | |||||
width: 100%; | |||||
height: 304rpx; | |||||
} | |||||
.itemImg{ | |||||
position: absolute; | |||||
width: 670rpx; | |||||
height: 238rpx; | |||||
border-radius: 15rpx; | |||||
overflow: hidden; | |||||
z-index: 5; | |||||
opacity: 0.7; | |||||
top: 15%; | |||||
} | |||||
.active{ | |||||
opacity: 1; | |||||
z-index: 10; | |||||
width: 670rpx; | |||||
height: 304rpx; | |||||
top: 7%; | |||||
transition:all .2s ease-in 0s; | |||||
} | } | ||||
.item{ | |||||
width: 670rpx!important; | |||||
height: 304rpx; | |||||
overflow: hidden; | |||||
border-radius: 16rpx; | |||||
} |
@@ -64,7 +64,7 @@ | |||||
<text>商户活动:</text> | <text>商户活动:</text> | ||||
</view> | </view> | ||||
<view> | <view> | ||||
<text>{{data.actionDesc}}</text> | |||||
<text style="line-height:38rpx;">{{data.actionDesc}}</text> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
@@ -1,4 +1,4 @@ | |||||
const navigationBarHeight = (getApp().statusBarHeight + 50) + 'px' | |||||
const navigationBarHeight = (getApp().statusBarHeight + 44) + 'px' | |||||
let config = require("../../config/config.js"); | let config = require("../../config/config.js"); | ||||
let app = getApp(); | let app = getApp(); | ||||
const Http = require("../../utils/HttpBasics"); | const Http = require("../../utils/HttpBasics"); | ||||
@@ -12,15 +12,12 @@ | |||||
.banner { | .banner { | ||||
position: relative; | position: relative; | ||||
width: 590rpx; | |||||
/* box-shadow:0px 14px 26px 0px rgba(199,203,211,1); */ | |||||
padding:50rpx 40rpx; | |||||
height: 204rpx; | |||||
width: 100%; | |||||
} | } | ||||
.banner image { | .banner image { | ||||
display: block; | display: block; | ||||
width: 670rpx; | |||||
width: 100%; | |||||
border-radius: 12rpx; | border-radius: 12rpx; | ||||
} | } | ||||
@@ -30,7 +27,7 @@ | |||||
background: #fff; | background: #fff; | ||||
border-radius: 12rpx; | border-radius: 12rpx; | ||||
width: 100%; | width: 100%; | ||||
margin: 30rpx auto 0; | |||||
margin: 24rpx auto 0; | |||||
padding-bottom: 20rpx; | padding-bottom: 20rpx; | ||||
} | } | ||||
@@ -108,7 +108,6 @@ page{ | |||||
.user-btns{ | .user-btns{ | ||||
background: #fff; | background: #fff; | ||||
margin: 20rpx 20rpx; | |||||
display: flex; | display: flex; | ||||
text-align: center; | text-align: center; | ||||
flex-wrap: wrap; | flex-wrap: wrap; | ||||