Skip to content

M
mayi-mp-shop
Commit 33ef3c40 by 李嘉林
Options

轮播图优化

parent 4a204ee7
Showing with 74 additions and 38 deletions
src/pages/home/index.vue
...@@ -203,7 +203,7 @@ export default { ...@@ -203,7 +203,7 @@ export default {
console.log("36", this.pageData); console.log("36", this.pageData);
}, },
scrolls(el){ scrolls(el){
if(this.$mp.page.selectComponent(".goodsListItem")){ if(this.$mp.page && this.$mp.page.selectComponent(".goodsListItem")){
this.$mp.page.selectComponent(".goodsListItem").getScroll(el); this.$mp.page.selectComponent(".goodsListItem").getScroll(el);
} }
}, },
......
static/nativeComponents/Banner/index.js
...@@ -21,20 +21,34 @@ Component({ ...@@ -21,20 +21,34 @@ Component({
autoplay: false, autoplay: false,
interval: 2000, interval: 2000,
duration: 500, duration: 500,
activeIndex:0, activeIndex: 0,
bannerHeight: 0,
firstLoad:false,
}, },
methods: { methods: {
customMethod() { customMethod() {
console.log("hello world! I am learning 微信小程序"); console.log("hello world! I am learning 微信小程序");
}, },
bannerChange(val) { bannerChange(val) {
console.log(val,'--------30') console.log(val, "--------30");
this.setData({ activeIndex:val.detail.current }); this.setData({ activeIndex: val.detail.current });
}, },
onClick(data){ onClick(data) {
let item=data.currentTarget.dataset.item; let item = data.currentTarget.dataset.item;
console.log(data.currentTarget.dataset.item,'iiii') console.log(data.currentTarget.dataset.item, "iiii");
app.$themeToLink(item.link) app.$themeToLink(item.link);
},
loadImg(e) {
let { firstLoad } = this.data;
if (firstLoad == true) {
return;
}
firstLoad = true;
let winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
let imgh = e.detail.height; //图片高度
let imgw = e.detail.width;
let swiperH = winWid * imgh / imgw + "px";
this.setData({ bannerHeight: swiperH, firstLoad }); //设置高度
} }
} }
}); });
\ No newline at end of file
static/nativeComponents/Banner/index.wxml
<view> <view>
<view class="banner" <view class="banner" style="--dotsColor:{{datas.componentData.indColor}};padding-top:{{datas.componentData.paddingList[0].value*2}}rpx;padding-bottom:{{datas.componentData.paddingList[1].value*2}}rpx;padding-left:{{datas.componentData.paddingList[2].value*2}}rpx;padding-right:{{datas.componentData.paddingList[3].value*2}}rpx;">
style="--dotsColor:{{datas.componentData.indColor}};padding-top:{{datas.componentData.paddingList[0].value*2}}rpx;padding-bottom:{{datas.componentData.paddingList[1].value*2}}rpx;padding-left:{{datas.componentData.paddingList[2].value*2}}rpx;padding-right:{{datas.componentData.paddingList[3].value*2}}rpx;"> <view class="bannerItem">
<view class="bannerItem"> <swiper
<swiper class="swiper" indicator-dots="{{indicatorDots}}" class="swiper {{datas.componentData.initIndSite=='onter'?'onterDot':''}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true" bindchange="bannerChange"> indicator-dots="{{indicatorDots}}"
<block wx:for="{{datas.componentData.imgList}}" wx:key="index"> autoplay="{{autoplay}}"
<swiper-item data-item="{{item}}" bindtap="onClick" > interval="{{interval}}"
<view class="swiper-item"> duration="{{duration}}"
<image src="{{item.imageUrl}}" style="width:100%;border-radius:{{datas.componentData.borderRadius*2}}rpx" mode="widthFix" class="bannerImgItem"></image> circular="true"
</view> bindchange="bannerChange"
</swiper-item> style="height:{{bannerHeight}}"
</block> >
</swiper> <block wx:for="{{datas.componentData.imgList}}" wx:key="index">
<view class="dots"> <swiper-item data-item="{{item}}" bindtap="onClick">
<view class="dotsItem {{index==activeIndex?'isDotsColor':''}} {{datas.componentData.indStyle == 'flat'?'dotsStyle1':'dotsStyle2'}}" wx:for="{{datas.componentData.imgList}}" wx:key="index"></view> <view class="swiper-item">
</view> <image
</view> src="{{item.imageUrl}}"
</view> style="width:100%;border-radius:{{datas.componentData.borderRadius*2}}rpx"
mode="widthFix"
bindload="loadImg"
class="bannerImgItem"
></image>
</view>
</swiper-item>
</block>
</swiper>
<view class="dots">
<view
class="dotsItem {{index==activeIndex?'isDotsColor':''}} {{datas.componentData.indStyle == 'flat'?'dotsStyle1':'dotsStyle2'}} {{datas.componentData.indBorderShow==true?'dotBorder':''}}"
wx:for="{{datas.componentData.imgList}}"
wx:key="index"
></view>
</view>
</view>
</view>
</view> </view>
\ No newline at end of file
static/nativeComponents/Banner/index.wxss
...@@ -6,7 +6,9 @@ ...@@ -6,7 +6,9 @@
} }
.swiper{ .swiper{
width: 100%; width: 100%;
height: calc(100vw*9/16); /* height: calc(100vw*9/16); */
}
.onterDot{
padding-bottom: 32rpx; padding-bottom: 32rpx;
} }
.swiper-item{ .swiper-item{
...@@ -38,18 +40,21 @@ ...@@ -38,18 +40,21 @@
margin: 0 8rpx; margin: 0 8rpx;
background: rgba(255,255,255,0.4); background: rgba(255,255,255,0.4);
} }
.dotBorder{
border: 1px solid var(--dotsColor);
}
.dotsStyle1{ .dotsStyle1{
width: 30rpx; width: 36rpx;
height: 10rpx; height: 12rpx;
border-radius: 4rpx; border-radius: 12rpx;
-webkit-border-radius: 4rpx; -webkit-border-radius: 12rpx;
-moz-border-radius: 4rpx; -moz-border-radius: 12rpx;
-ms-border-radius: 4rpx; -ms-border-radius: 12rpx;
-o-border-radius: 4rpx; -o-border-radius: 12rpx;
} }
.dotsStyle2{ .dotsStyle2{
width: 20rpx; width: 16rpx;
height: 20rpx; height: 16rpx;
border-radius: 50%; border-radius: 50%;
-webkit-border-radius: 50%; -webkit-border-radius: 50%;
-moz-border-radius: 50%; -moz-border-radius: 50%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment