电影周周看V2

周周看V2"/>

电影周周看V2

目录：

1.数据绑定

2.小程序运行环境与基本架构

3.条件渲染（wx:if）

4.列表渲染（wx:for）

5.使用swiper组件

6.页面的生命周期函数

7.更新数据

8.事件机制

-----------------------------------------------------------------------------------------------------------------------------------------------------

1.数据绑定

（类似结构体）

weekly.js:

Page({data:{thisWeekMovie:{name:"教父",comment:"最精彩的剧本，最真实的黑帮电影。",imagePath:"/Image/jf.jpg"},count:123,score:58}
})

weekly.wxml:（修改部分代码）

<view class='container'>
<!-- container 在 index.wxss中定义 则该部分该功能不可用，放入app.wxss中定义，则为全局定义，该功能可用--><text>本周推荐</text><image class='about-banner' src="/Images/jf.jpg"></image><text>{{thisWeekMovie.name}}</text><text>点评：{{thisWeekMoviement}}</text><text>{{(score>=60)?"及格":"不及格"}}</text>
</view>

效果图：

 

2.小程序运行环境与基本架构

视图层（渲染层）和逻辑层

 

3.条件渲染

（if语句）

1)wx:if属性的使用

2)wx:if VS hidden

weekly.js

Page({data:{thisWeekMovie:{name:"教父",comment:"最精彩的剧本，最真实的黑帮电影。",imagePath:"/Images/jf.jpg",isHighlyRecommended:true},count:123,score:58}
})

weekly.wxml（在<view></view>中添加）

<!-- 使用条件渲染 --><!-- <text wx:if="{{thisWeekMovie.isHighlyRecommended}}" style='font-size:16px; color:red;'>强烈推荐</text> --><!-- 使用hidden属性 --><text hidden="{{!thisWeekMovie.isHighlyRecommended}}" style='font-size:16px; color:red;'>强烈推荐</text>

4.列表渲染
（循环语句）重复的渲染生成组件

wx:for

weekly.js（添加图片）

Page({data:{WeeklyMovieList:[{name:"泰坦尼克号",comment:"失去的才是永恒的。",imagePath:"/Images/ttnkh.jpg",isHighlyRecommended:false},{name:"这个杀手不太冷",comment:"小萝莉与怪蜀黍纯真灿烂的爱情故事。",imagePath:"/Images/zgssbtl.jpg",isHighlyRecommended:false},{name:"教父",comment:"最精彩的剧本，最真实的黑帮电影。",imagePath:"/Images/jf.jpg",isHighlyRecommended:true},],count:123,score:58}
})

weekly.wxml

<view class=''>
<!-- container 在 index.wxss中定义 则该部分该功能不可用，放入app.wxss中定义，则为全局定义，该功能可用--><!-- <image class='about-banner' src="/Images/jf.jpg"></image><text>{{thisWeekMovie.name}}</text><text>点评：{{thisWeekMoviement}}</text><text>{{(score>=60)?"及格":"不及格"}}</text><!-- 使用条件渲染 --><!-- <text wx:if="{{thisWeekMovie.isHighlyRecommended}}" style='font-size:16px; color:red;'>强烈推荐</text> --><!-- 使用hidden属性 --><!-- <text hidden="{{!thisWeekMovie.isHighlyRecommended}}" style='font-size:16px; color:red;'>强烈推荐</text>  --><!-- 更改样式 --><view class='movie' wx:for="{{WeeklyMovieList}}"><image class='movie-image' src='{{item.imagePath}}'></image><view class='movie-details'><text>第{{index+1}}周：{{item.name}}</text><text>点评：{{itemment}}</text><text wx:if="{{item.isHighlyRecommended}}" style='font-size:16px; color:red;'>强烈推荐</text></view></view></view>

weekly.wxss

.movie{display: flex;
}.movie-details{display: flex;flex-direction: column;width:550rpx;
}.movie-image{width: 200rpx;height: 200rpx;
}

效果图：

附：item为for内循环元素,index为数组序号

 

5.使用swiper组件

使用swiper组件，将列表展示转为幻灯片轮播展示

swiper元素默认高度是150像素高，image元素默认生成的高度是240像素高

weekly.wxml

<!-- 更改样式 --><swiper class='movie-swiper' indicator-dots='{{true}}' previous-margin='50rpx' next-margin='50rpx'> <!-- previous-margin='50rpx' next-margin='50rpx'为前、后一页漏出的宽度 --><!-- indicator-dots='{{true}}' 面板指示 --><swiper-item class='movie' wx:for="{{WeeklyMovieList}}"><view class='container1 movie-card'><image class='movie-image' src='{{item.imagePath}}'></image><!-- <view class='movie-details'>去掉，恢复成从上往下的放置 --><text>第{{index+1}}周：{{item.name}}</text><text>点评：{{itemment}}</text><text wx:if="{{item.isHighlyRecommended}}" style='font-size:16px; color:red;'>强烈推荐</text><!-- </view> --></view></swiper-item></swiper>

weekly.wxss（添加代码）

.movie-swiper{/* 设为页面适口高度的90% */height: 90vh;
}.movie-card{height: 100%;width: 100%;background-color: #eee;/* 两个相邻幻灯片间隔10像素 */margin: 0 20rpx;
}

附，我在app.wxss中添加（如下样式）

.container1 {background-color: #fff;height: 100%;display: flex;flex-direction: column;/* justify-content: space-between;  */justify-content: space-around;align-items: center;box-sizing: border-box;
} 

效果图：（三张图）

 

6.页面的生命周期函数

weekly.wxml（修改了swiper部分代码）

 <!-- 更改样式 --><swiper class='movie-swiper' indicator-dots='{{true}}' previous-margin='50rpx' next-margin='50rpx' current='{{currentIndex}}'>  <!-- current='1' 其值为最开始显示的页(1) --><!-- previous-margin='50rpx' next-margin='50rpx'为前、后一页漏出的宽度 --><!-- indicator-dots='{{true}}' 面板指示 --><swiper-item class='movie' wx:for="{{WeeklyMovieList}}"><view class='container1 movie-card'><image class='movie-image' src='{{item.imagePath}}'></image><!-- <view class='movie-details'>去掉，恢复成从上往下的放置 --><text>第{{index+1}}周：{{item.name}}</text><text>点评：{{itemment}}</text><text wx:if="{{item.isHighlyRecommended}}" style='font-size:16px; color:red;'>强烈推荐</text><!-- </view> --><!-- bindtap='f0' 定义事件处理函数f0 --><text bindtap='f0' wx:if="{{index<(WeeklyMovieList.length-1)}}" class='return-button'>返回本周</text></view></swiper-item></swiper>

weekly.js（在WeeklyMovieList中添加代码）

Page({data:{WeeklyMovieList:[{name:"泰坦尼克号",comment:"失去的才是永恒的。",imagePath:"/Images/ttnkh.jpg",isHighlyRecommended:false},{name:"这个杀手不太冷",comment:"小萝莉与怪蜀黍纯真灿烂的爱情故事。",imagePath:"/Images/zgssbtl.jpg",isHighlyRecommended:false},{name:"教父",comment:"最精彩的剧本，最真实的黑帮电影。",imagePath:"/Images/jf.jpg",isHighlyRecommended:true},],count:123,score:58,// 添加内部状态变量currentIndex: 0},// onLoad的生命周期回调函数onLoad:function(options){this.setData({currentIndex:this.data.WeeklyMovieList.length - 1})},onShow:function(){},onReady:function(){},onHide:function(){},onUnload:function(){}
})

结果显示：（直接跳转至最后一页，且除最后一页外都有“返回本周”）

 

7.更新数据

小程序并没有提供类似于DOM的API，来让逻辑层的JavaScript对视图层进行直接更新。只能是首先在视图层建立数据绑定，然后在逻辑层的JavaScript中，通过对视图层所绑定的内部状态数据的更新，来间接的对视图层进行更新。

对视图层进行更新的时候，必须使用this.setData方法调用

weekly.wxml（在最外层<view></view>中添加代码）

<text>{{count}}</text>
<button bindtap='f0'>+1</button>

weekly.js

 // onLoad的生命周期回调函数onLoad:function(options){this.setData({currentIndex:this.data.WeeklyMovieList.length - 1})},f0:function(event){this.setData({count:this.data.count+1,// 更改第三个的名字，对局部的更新"WeeklyMovieList[2].name":"教父3"})}

效果图：

小程序视图层相应的更新，并不会自动的引起内部数据的变化。视图层对内部状态数据是单向绑定。

 

8.事件机制

响应用户交互（视图层向逻辑层进行数据通信的一种方式）

catchtap：绑定事件处理函数，会阻止自己触发这个tap事件向上冒泡传递。不会向上冒泡传递。eg:不会触发<view>

bindtap：绑定事件处理函数，当前元素上并不会阻止自己的冒泡事件向上冒泡传递。eg:会触发<view>

删除无关代码，更改相应代码。weekly.js:

  f0:function(event){this.setData({currentIndex: this.data.WeeklyMovieList.length - 1})}

效果图：

点击“返回本周”，返回最后一页。

-------------------------------------------------------------

总结：类似轮播图，添加按钮等点击跳转事件。