| @@ -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; | ||||