微信小程序使用Swiper组件构建轮播图

新建目录 posts (阅读页面)

点击目录右键新建page

目录结构如下:

 

 

在app.json中,把posts调整为默认显示的页面(暂时先这样,具体的多页面之后再说)

{
  "pages": [
    "pages/posts/posts","pages/welcome/welcome"
    
  ],"window": {
    "navigationBarBackgroundColor": "#405f80"
  },"sitemapLocation": "sitemap.json"
}

 

官方文档里找到swiper组件

 

 

posts.wxml

<!--pages/posts/posts.wxml-->
<view>
  swiper indicator-dots="true" interval="2000" autoplay="true">
    swiper-item><image src="/images/wx.png"></image="/images/vr.png"="/images/iqiyi.png"</swiper>  
>

 

posts.wxss

注意轮播图的尺寸取决于swiper容器的尺寸,而不是swiper-item的尺寸

 

 

/* pages/posts/posts.wxss */
swiper{
  width:100%;
  height:500rpx;
}
swiper image{500rpx;
}

 

效果图:

相关文章

判断H5页面环境在微信中还是小程序中 用小程序提供的wx.mini...
wx.reLaunch和wx.navigateTo,wx.navigateTo的区别 2019-03-...
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法...
H5项目接入微信授权登录,通过 UA 区分微信还是普通浏览器:...
微信小程序获取data-xx=&quot;&quot;属性的值,自定...
小程序报错:TypeError: Cannot read property ‘addEventLi...