欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序最基本的组件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的使用
我们发现图片的宽度未满。我们需要像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>

这样最基本的就完成了,我们还需要的就是多看官方文档!

相关标签: 小程序 html