收藏
回答

swiper首次加载时闪一下?

在开发过程中,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-topstyle="{{data.Style.topStyle}}">

      <view class="topDots {{idx == data.BannersCurrent?'active':''}}" catchtap="clickBannersdata-idx="{{idx}}" data-id="{{data.DecorationPageId}}" wx:for="{{data.Banners}}"  wx:for-item="itmwx:for-index="idxwx:key="idx"  style="{{idx == data.BannersCurrent?data.Style.activeStyle:data.Style.dotsStyle}}">

      {{itm.Title}}

      </view>

    </view>

    </view>

    <view class="swipermskerstyle="{{data.Style.swiperStyle}}">

    <swiper class="swipersindicator-dots="{{false}}" current="{{data.BannersCurrent}}" style="{{data.Style.swiperStyle}}" bindchange="changesdata-id="{{data.DecorationPageId}}">

      <block wx:for="{{data.Banners}}" wx:key="idxwx:for-item="itmwx:for-index="idx">

        <swiper-item>

          <image class="banners-imgmode="aspectFillsrc="{{itm.Img}}" bindtap="bindBannerDetailsTapdata-item="{{itm}}"></image>

        </swiper-item>

      </block>

    </swiper>

    </view>

  </view>

</template>


回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容