在开发过程中,swiper首次滑动会闪一下白频,然后恢复正常
wxml部分
<block wx:for="{{DecorationBanner}}" wx:key="index">
<template is="{{item.TemplateCode}}" data="{{data:item,userInfo:userInfo,videoHtmlShow:videoHtmlShow,fontColor:fontColor,TemplateData:TemplateData}}"></template>
</block>
js 部分
DecorationBanner:[
{
Banners: [
{
BannerId: "127f8f29-efc4-40be-a9cc-fbf49ca07ed8",
BannerIdx: 0,
BeforeAfterReceive: 0,
CreateTime: 1619504732877,
DecorationPageId: "c8796f87-1045-4ed7-9b0c-a5b19c556143",
EndTime: null,
Img: "./mode/20.png",
Integral: 0,
Level: null,
LinkData: "",
LinkType: 0,
MainColor: null,
MarketPrice: 0,
PartnerPrice: 0,
Price: 0,
Sort: 0,
StartTime: null,
Style: null,
SubTitle: "",
SupplierId: "a0000000-b000-c000-d000-e00000000000",
TemplateCode: "banners2",
Title: "sfs",
VerifyLogin: 0,
VipPrice: 0,
oldLinkType: 0,
remark: "",
},
{
BannerId: "127f8f29-efc4-40be-a9cc-fbf49ca07ed7",
BannerIdx: 0,
BeforeAfterReceive: 0,
CreateTime: 1619504732877,
DecorationPageId: "c8796f87-1045-4ed7-9b0c-a5b19c556143",
EndTime: null,
Img: "./mode/21.png",
Integral: 0,
Level: null,
LinkData: "",
LinkType: 0,
MainColor: null,
MarketPrice: 0,
PartnerPrice: 0,
Price: 0,
Sort: 0,
StartTime: null,
Style: null,
SubTitle: "",
SupplierId: "a0000000-b000-c000-d000-e00000000000",
TemplateCode: "banners2",
Title: "cs12",
VerifyLogin: 0,
VipPrice: 0,
oldLinkType: 0,
remark: "",
},
{
BannerId: "127f8f29-efc4-40be-a9cc-fbf49ca07ed6",
BannerIdx: 0,
BeforeAfterReceive: 0,
CreateTime: 1619504732877,
DecorationPageId: "c8796f87-1045-4ed7-9b0c-a5b19c556143",
EndTime: null,
Img: "./mode/22.png",
Integral: 0,
Level: null,
LinkData: "",
LinkType: 0,
MainColor: null,
MarketPrice: 0,
PartnerPrice: 0,
Price: 0,
Sort: 0,
StartTime: null,
Style: null,
SubTitle: "",
SupplierId: "a0000000-b000-c000-d000-e00000000000",
TemplateCode: "banners2",
Title: "cs1",
VerifyLogin: 0,
VipPrice: 0,
oldLinkType: 0,
remark: "",
},
],
DecorationPageId: "c8796f87-1045-4ed7-9b0c-a5b19c556143",
Img: "",
PageCode: "adminhomejhlosyxi",
Sort: 116,
Style: {
swiperStyle:"width: 100vw;height: 1040rpx;background: url(https://img1.aimeilife.com/Upload/20220121/Image/261b0284-3610-4786-8dd4-438f46b96d42.png) no-repeat 0 0/100% 100%; ",
dotsStyle:"background: linear-gradient(0deg, #AF2121 0%, rgba(238, 110, 110, 0.59) 100%);color: #FDD8B4;",
activeStyle:"background: linear-gradient(23deg, #EECF9F, #F4E5CA);color: #BF1D1D;",
topStyle:"width: 534rpx;height: 47rpx;"
},
SubTitle: null,
SupplierId: "a0000000-b000-c000-d000-e00000000000",
TemplateCode: "banners2",
TemplateMainType: 0,
Title: "https://img1.aimeilife.com/Upload/20220121/Image/2d1118e4-763f-40fb-847a-60c7bd572535.png",
XiaoCodeAppId: null,
BannersCurrent:0
},
{
Banners: [
{
BannerId: "127f8f29-efc4-40be-a9cc-fbf49ca07ed8",
BannerIdx: 0,
BeforeAfterReceive: 0,
CreateTime: 1619504732877,
DecorationPageId: "c8796f87-1045-4ed7-9b0c-a5b19c556143",
EndTime: null,
Img: "https://img1.aimeilife.com/Upload/20220121/Image/2b17ab1e-2af9-409b-9f47-19418cd7f474.png",
Integral: 0,
Level: null,
LinkData: "",
LinkType: 0,
MainColor: null,
MarketPrice: 0,
PartnerPrice: 0,
Price: 0,
Sort: 0,
StartTime: null,
Style: null,
SubTitle: "",
SupplierId: "a0000000-b000-c000-d000-e00000000000",
TemplateCode: "banners2",
Title: "sfs",
VerifyLogin: 0,
VipPrice: 0,
oldLinkType: 0,
remark: "",
},
{
BannerId: "127f8f29-efc4-40be-a9cc-fbf49ca07ed7",
BannerIdx: 0,
BeforeAfterReceive: 0,
CreateTime: 1619504732877,
DecorationPageId: "c8796f87-1045-4ed7-9b0c-a5b19c556143",
EndTime: null,
Img: "https://img1.aimeilife.com/Upload/20220121/Image/e20ba519-0e90-45a7-888f-8a0bd15135aa.png",
Integral: 0,
Level: null,
LinkData: "",
LinkType: 0,
MainColor: null,
MarketPrice: 0,
PartnerPrice: 0,
Price: 0,
Sort: 0,
StartTime: null,
Style: null,
SubTitle: "",
SupplierId: "a0000000-b000-c000-d000-e00000000000",
TemplateCode: "banners2",
Title: "cs12",
VerifyLogin: 0,
VipPrice: 0,
oldLinkType: 0,
remark: "",
},
{
BannerId: "127f8f29-efc4-40be-a9cc-fbf49ca07ed6",
BannerIdx: 0,
BeforeAfterReceive: 0,
CreateTime: 1619504732877,
DecorationPageId: "c8796f87-1045-4ed7-9b0c-a5b19c556143",
EndTime: null,
Img: "https://img1.aimeilife.com/Upload/20220121/Image/ea32abc7-0c71-4534-8b54-cc3ccb1a9f20.png",
Integral: 0,
Level: null,
LinkData: "",
LinkType: 0,
MainColor: null,
MarketPrice: 0,
PartnerPrice: 0,
Price: 0,
Sort: 0,
StartTime: null,
Style: null,
SubTitle: "",
SupplierId: "a0000000-b000-c000-d000-e00000000000",
TemplateCode: "banners2",
Title: "cs1",
VerifyLogin: 0,
VipPrice: 0,
oldLinkType: 0,
remark: "",
},
],
DecorationPageId: "c8796f87-1045-4ed7-9b0c-a5b19c556141",
Img: "",
PageCode: "adminhomejhlosyxi",
Sort: 116,
Style: {
swipermsker:"width: 100vw;height: 1040rpx;",
swiperStyle:"width: 100vw;height: 1040rpx;background: url(https://img1.aimeilife.com/Upload/20220121/Image/e2b2a72f-63c3-492a-8ebc-82d662c7b38c.jpg) no-repeat 0 0/100% 100%; ",
dotsStyle:"background: linear-gradient(0deg, #AF2121 0%, rgba(238, 110, 110, 0.59) 100%);color: #FDD8B4;",
activeStyle:"background: linear-gradient(23deg, #EECF9F, #F4E5CA);color: #BF1D1D;",
topStyle:"width: 534rpx;height: 47rpx;"
},
SubTitle: null,
SupplierId: "a0000000-b000-c000-d000-e00000000000",
TemplateCode: "banners2",
TemplateMainType: 0,
Title: "https://img1.aimeilife.com/Upload/20220121/Image/2d1118e4-763f-40fb-847a-60c7bd572535.png",
XiaoCodeAppId: null,
BannersCurrent:0
}
]
模板
<template name="banners2">
<view class="banners2">
<view class="top">
<view class="banners-top" style="{{data.Style.topStyle}}">
<view class="topDots {{idx == data.BannersCurrent?'active':''}}" catchtap="clickBanners" data-idx="{{idx}}" data-id="{{data.DecorationPageId}}" wx:for="{{data.Banners}}" wx:for-item="itm" wx:for-index="idx" wx:key="idx" style="{{idx == data.BannersCurrent?data.Style.activeStyle:data.Style.dotsStyle}}">
{{itm.Title}}
</view>
</view>
</view>
<view class="swipermsker" style="{{data.Style.swiperStyle}}">
<swiper class="swipers" indicator-dots="{{false}}" current="{{data.BannersCurrent}}" style="{{data.Style.swiperStyle}}" bindchange="changes" data-id="{{data.DecorationPageId}}">
<block wx:for="{{data.Banners}}" wx:key="idx" wx:for-item="itm" wx:for-index="idx">
<swiper-item>
<image class="banners-img" mode="aspectFill" src="{{itm.Img}}" bindtap="bindBannerDetailsTap" data-item="{{itm}}"></image>
</swiper-item>
</block>
</swiper>
</view>
</view>
</template>
提供下这种格式的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。