|
swiper.wxml
<swiper current="{{currentindex}}" 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 bindtap="f0" wx:if="{{index < thismovie.length - 1}}" class="return-button">返回</text>
<text wx:if="{{item.tuijian}}">推荐</text>
</view>
</swiper-item>
</swiper>
swiper.js
Page({
data: {
thismovie: [{
name: "我们都是中国人1",
desc: "这是一个什么样的电影呢?",
img: "/images/gbt1.jpg",
tuijian:true
},
{
name: "这也是一个电影2",
desc: "我们都是中国人我们一起来看电影吧",
img: "/images/gbt2.jpg",
tuijian: false
},
{
name: "这也是一个电影3",
desc: "我们都是中国人我们一起来看电影吧",
img: "/images/gbt3.jpg",
tuijian: true
},
{
name: "这也是一个电影4",
desc: "我们都是中国人我们一起来看电影吧",
img: "/images/gbt4.jpg",
tuijian: true
},
{
name: "这也是一个电影5",
desc: "我们都是中国人我们一起来看电影吧",
img: "/images/gbt5.jpg",
tuijian: true
}
],
thisok: ["a", "b", "c"],
currentindex:0
},
onLoad:function(options){
this.setData({
currentindex: this.data.thismovie.length - 2
})
},
onShow:function(){
},
onReady:function(){
},
onHide:function(){
},
onUnload:function(){
}
})onLoad 初始加载
onShow 页面每一次被显示的时候,它都要被调用一次,不仅是在初始加载之后 显示的时候被调有一次,每一次页面从隐藏状态变成显示可见的时候 它都要被调用一次
onReady 它是页面初如渲染完成 整个视图准备好了,已经可以交互的时候被调用一次
onHide
onUnload
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;
}
文档:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0
|
|