微信小程序使用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;
}

 

效果图:

相关文章

1. 获取输入框数据wxml中的input上增加bindinput属性,和方法值在js部分定义与之对应的方法,只要在输入...
1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式2.获取位置要在app.json中标明权限3.先使用...
QQ小程序支付 Java后端 同学折腾QQ小程序的支付折腾了好几天,没有完成统一下单,因为我做过微信和支付...
前言: 在实际项目开发中我们经常会遇到账号统一的问题,如何在不同端或者是不同的登录方式下保证同一个...
一、前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无...
前言: 之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的动态tab和swiper切换的功能,但是...