微信小程序广告banner、滚动屏怎么做?

使用滑块视图容器swiper和swiper-item可以制作滚动屏,代码如下:

wxml:


   
    
  
  
    
  
  
    
  
  
    
  
  
    
  

wxss:

swiper image{
  width: 100%;
  height: 100%;
}

效果如下:

微信小程序广告banner、滚动屏怎么做?_第1张图片

其中,swiper常用参数如下,其中只可放置swiper-item组件,否则会导致未定义的行为。:

属性 类型 默认值 必填 说明
indicator-dots boolean FALSE 是否显示面板指示点
indicator-color color rgba(0, 0, 0, .3) 指示点颜色
indicator-active-color color #000000 当前选中的指示点颜色
autoplay boolean FALSE 是否自动切换
current number 0 当前所在滑块的 index
interval number 5000 自动切换时间间隔
duration number 500 滑动动画时长

 swiper使用细节可见官方文档:

视图容器 / swiper (qq.com)

微信小程序教程,欢迎关注我!

你可能感兴趣的:(微信小程序,微信小程序,notepad++,小程序)