小程序swiper轮播图不显示

关于swiper轮播图不显示，但是实际又占了位置（图一）。原因目前也不是很清楚，但只需要删

除appwxss里的样式display: flex即可，或者自己重写样式覆盖appwxss的样式在引用重写的样式

即可(图二)。

学小程序时写过一个B站demo，也遇到此问题，最后自定义Swiper的Dot来实现了。

思路是：用view组件重写dot，给swiper组件绑定bindchange事件用来获取当前第几个dot，动态改变class。

<!-- 滚动广告 begin -->

<view class="slider-wrapper">

<swiper bindchange="swiperChange" indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<block wx:for="{{imgUrls}}" wx:key="this">

<swiper-item>

<image src="{{item}}" class="slide-image"/>

</swiper-item>

</block>

</swiper>

<view class="swipe-btn-wrapper">

<view class="swipe-btn-list">

<view class="{{dotsClass[0]}}"></view>

<view class="{{dotsClass[1]}}"></view>

<view class="{{dotsClass[2]}}"></vi

2019/2/22

indexwxml文件

indexjs文件

数组 imageArr 动态的改变数组的数量，

例如：当 imageArr 中的长度为4，轮播滚动到 3 ，current=3；此时swiper没有绑定current，并将 imageArr 的长度动态改为2，这会出现current还是3，导致swiper不显示的问题。

解决：

indexwxml 中在swiper中绑定current

indexjs 中增加current

再加上

-webkit-backface-visibility: hidden;

-webkit-transform: translate3d(0, 0, 0);

亲测有效

微信小程序直播消息滑动，1打开微信，点击发现，找到小程序点击，进入小程序以后，在搜索框内输入手持d幕。

2进入小程序之后可以看到字幕的样式，选择中间滚动的字幕样式

3对边点击一处找到输入框，在输入框内输入你想显示的内容，点击右边的选项可以调节字幕内容的大小、颜色以及滚动速度等，然后保存到手机中就可以了。

以上就是关于小程序swiper轮播图不显示全部的内容，包括:小程序swiper轮播图不显示、微信小程序怎样修改swiper组件中样式的修改、微信小程序--swiper中current问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！