0
点赞
收藏
分享

微信扫一扫

02微信小程序-轮播的宽度100%显示和轮播的基础配置

盖码范 2022-09-01 阅读 65

 

1==》如何让轮播的宽度100%显示?
你先给swiper 外面添加一个大盒子,给大盒子一个类 。
<view class='lunbobox'>
然后wxss 里面设置 image , width: 100%; 在设置大盒子的宽度 width: 100%; 这样就可以了.


<view class='lunbobox'>
<!-- 轮播开始 -->
<swiper indicator-dots="{{indicatorDots}}"
circular
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="750" height="150"/>
</swiper-item>
</block>
</swiper>
<!-- end -->
</view>

设置盒子的宽度 图片的宽度 让图片100%显示
.lunbobox{
width: 750rpx;
}

.slide-image{
width: 100%;
}



2==》轮播的基础配置项
circular表示是否衔接 后面不要加true哦

<swiper indicator-dots="{{indicatorDots}}"
circular
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="750" height="150"/>
</swiper-item>
</block>
</swiper>

// 轮播
imgUrls: [
'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=750',
'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=750',
'https://images.unsplash.com/photo-1551446591-142875a901a1?w=750'
],
indicatorDots: true, //是否显示小圆点 true显示
autoplay: true, //是否自动播放 true自动播放
interval: 5000, //播放的间隔
duration: 1000, //滑 动动画时长


03==》跳转使用 它在导航里面的哦 <navigator></navigator>
navigator标签类似于a标签,它里面是可以包含view标签的


04==》如何循环三个导航链接for="{{labs}}" 循环的语法 labs是被循环的数组 注意有双引号 item是循环的每一项

<navigator url="../list/list" hover-class="navigator-hover" wx:for="{{labs}}">
<view>{{item.title}}</view>
</navigator>

// 导航链接的数据
labs: [{ id: 1, title: "haha1" }, { id: 3, title: "haha2" }, { id: 3, title: "haha3" }]

05==》css3 一个在最左最右 /* 导航 */
.daohangbox{
display: flex;
justify-content: space-between; //巧记两者之间 between说明一个在左一个在右
}

 

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。


作者:​​晚来南风晚相识​​​

本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接

如果文中有什么错误,欢迎指出。以免更多的人被误导。



举报

相关推荐

0 条评论