8、Swipter幻灯篇组件

admin

swiper.wxml
<swiper current="{{thismovie.length - 1}}"  class="movie_swiper" indicator-dots="true" previous-margin="50px" next-margin="50px">
  <swiper-item class="movie" wx:for="{{thismovie}}">
   <view class="container movie_card">
      <image class="movie_image" src="{{item.img}}"></image>
      <text >编号：{{index+1}}{{item.name}}</text>
      <text>{{item.desc}}</text>
      <text wx:if="{{index < thismovie.length - 1}}" class="return-button">返回</text>
    </view>
  </swiper-item>
</swiper>

current="0"  打开页面、默认功换的是第1页
indicator-dots="true"  是否显示面板指示点，默认false
previous-margin="50rpx" 前边距，可用于露出前一项的一小部分
next-margin="50rpx"  后边距，可用于露出后一项的一小部分
swiper.js
Page({
  data: {
    thismovie: [{
      name: "我们都是中国人1",
      desc: "这是一个什么样的电影呢？",
      img: "/images/gbt1.jpg",
    },
    {
      name: "这也是一个电影2",
      desc: "我们都是中国人我们一起来看电影吧",
      img: "/images/gbt2.jpg"
    },
      {
        name: "这也是一个电影3",
        desc: "我们都是中国人我们一起来看电影吧",
        img: "/images/gbt3.jpg"
      }
    ]
  }
})

swiper.wxss
.movie{
  display: flex;
  background-color: royalblue;
}
.movie_image{
  width: 400rpx;
  height: 400rpx;
}
.movie_swiper{
  height: 90vh;
}
.movie_card{
  height: 100%;
  width: 100%;
  background: #eee;
  margin: 0,50rpx;
  position: relative;/*相对定位*/
}
.return-button{
position: absolute;/*绝对定位*/
  right: 5px;
  top: 10px;
  font-size: 24rpx;
  font-style: italic;
  border: 1px solid blue;
  border-radius: 10%;
  border-right: 5px;
}

swipter 默认像素是150px 高
image 默认像素是240px 高
文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html