微信小程序最基本的组件swiper的使用
程序员文章站
2022-07-10 22:13:55
...
学习微信小程序开发,最基本的便是轮播图的使用,当然微信官方给了最基本的组件的使用,swipe的使用,在我使用的时候,我发现也有很多的小坑,不过程序开发就是在Bug中不断成长
swiper插件的使用
swiper插件也就是轮播图,只不过我们在自己开发HTML的时候,我们一边下载别人的封装好的插件,不过在微信小程序后,我们官方文档给了一些配置,这使得我们通过配置某些参数,我们能够达到某些复杂插件的作用。
首先我们写入最基本的结构
<view >
<swiper class="swiper" >
<swiper-item ><image src="/images/wx.png" ></image></swiper-item>
<swiper-item ><image src="/images/vr.png" ></image></swiper-item>
<swiper-item ><image src="/images/iqiyi.png"></image></swiper-item>
</swiper>
</view>
在引入这样的代码我们运行就会发现
我们发现图片的宽度未满。我们需要像swiper-item输入宽度为100%;我们发现我们的宽度虽然达到了要求,但是我们的h没有达到要求
我们可以看下官方文档
仅可放置在swiper组件中,宽高自动设置为100%。
所以我们放入一下代码便可以
<!--pages/posts/posts.wxml-->
<view >
<swiper class="swiper" style="width:100%;height:500rpx" >
<swiper-item ><image src="/images/wx.png" style="width:100%;height:500rpx"></image></swiper-item>
<swiper-item ><image src="/images/vr.png" style="width:100%;height:500rpx"></image></swiper-item>
<swiper-item ><image src="/images/iqiyi.png"style="width:100%;height:500rpx"></image></swiper-item>
</swiper>
</view>
这样最基本的就完成了,我们还需要的就是多看官方文档!