小程序学习二（轮播图的实现和swiper组件的使用）

代码

目的效果

<!----图片轮播图--->
<swiper class="banner_swiper" indicator-dot="{
  {indicatorDots}}" indicator-active-coor=“#fff” autop>
  <!---遍历轮播图列表-->
      <block wx:for="{
  {banner_list}}" wx:for-item="item" wx:key="id">
        <swiper-item>
          <image bindtap="ev_banner" data-index="{
  {index}}" src="{
  {item}}">
        </swiper-item>
      </block>

官方文档

swiper =====>滑块视图容器

示例

wxml

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{
  {indicatorDots}}"
        autoplay="{
  {autoplay}}" interval="{
  {interval}}" duration="{
  {duration}}">
        <block wx:for="{
  {background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {
  {item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="page-section" style="