6、添加tabBar
找到全局配置文件app.json
向其中加入tabBar集合:
"tabBar": {
"list": [
{
"pagePath": "pages/about/about",
"text": "关于",
"iconPath": "images/user-no.png",
"selectedIconPath": "images/user-yes.png"
},
{
"pagePath": "pages/weekly/weekly",
"text": "每日推荐",
"iconPath": "images/film-no.png",
"selectedIconPath": "images/film-yes.png"
}
]
}
就发现最底部有两个tab了,于此同时,about页面的navigator元素不生效了,无法执行跳转,到底是什么原因呢?
我们看到tabBar里面,我们定义的集合,跳转页面时,tabBar同时也切换了,如果我们还使用原来的方式,坑定是不行的,那怎么弄呢,我们刚才看到了,open-type的取值,其中redirect是在在当前页打开,并不会切换tab,所以我们换一个open-type就行了,我们选择switchTab,重试一下,就跳转了!
7、设置全局顶部导航栏
一般我们顶部导航栏都是白底黑字,有两种方式,一种是将about页面的头部导航白底黑字的配置拷贝到weekly页面,这种不建议,另外一种是将之写在全局配置文件里,这样每个页面的头部导航都是一样的白底黑字,具体实现:要在前面加上window:
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "电影周周看"
}
8、数据绑定
有2种方式,一种是直接操作dom,另外一种是通过ajax更新。
dom操作:
传入一个数据对象----》使用document.getElementBy().innerHTML = 对象.属性
缺点:每次更新数据,需要对视图进行更新;视图结构耦合紧密,不易维护
ajax方式:
在page页面中传入data的数据对象:
Page({
/**
* 页面的初始数据
*/
data: {
thisWeeklyMovie:{
name: "教父",
comment: "点评:最精彩的剧本,最真实的黑帮电影!",
imgPath: "/images/asd.jpg"
},
count: 123,
score: 8.9
},
在weekly.wxml文件中:
使用插值表达式进行数据的读取和显示:
<text>浏览人数: {{count}}</text>
这样就可以显示出来 浏览人数: 123
wxml源代码:
<view class="container">
<text>本周推荐</text>
<image src="{{thisWeeklyMovie.imgPath}}"></image>
<text>电影名:{{thisWeeklyMovie.name}}</text>
<text>浏览人数: {{count}}</text>
<text>评分:{{score}}</text>
<text>好坏: {{score>8?"好":"差"}}</text>
<text>点评:{{thisWeeklyMovie.comment}} </text>
</view>
9、条件渲染
10、列表渲染
wx:for
<image src="item.imgPath}}" class="movie-img"></image>
<view class="movie-details">
<text>电影名:{{item.name}}</text>
<!-- <text>浏览人数: {{count}}</text>
<text>评分:{{score}}</text> -->
<!-- <text>好坏: {{score>8?"好":"差"}}</text> -->
<text>点评:{{item.comment}} </text>
<text wx:if="{{item.isHighlyRecommended}}" style="font-size:20px;color:red;">强烈推荐</text>
js:
WeeklyMovieList:[
{
name: "教父",
comment: "最精彩的剧本,最真实的黑帮电影!",
imgPath: "/images/asd.jpg",
isHighlyRecommended: true
},
{
name: "教父1",
comment: "最精彩的剧本,最真实的黑帮电影!",
imgPath: "/images/asd.jpg",
isHighlyRecommended: true
},
{
name: "教父2",
comment: "最精彩的剧本,最真实的黑帮电影!",
imgPath: "/images/asd.jpg",
isHighlyRecommended: true
},
{
name: "教父3",
comment: "最精彩的剧本,最真实的黑帮电影!",
imgPath: "/images/asd.jpg",
isHighlyRecommended: true
},
wx={{list}}
要输出每一项,使用抽象: item
下标: index
代码如下:
<view class="container">
<text>本周推荐</text>
<view class="movie" wx:key="{{index}} " wx:for="{{WeeklyMovieList}}">
<image src="{{item.imgPath}}" class="movie-img"></image>
<view class="movie-details">
<text>第{{index+1}}周推荐</text>
<text>电影名:{{item.name}}</text>
<!-- <text>浏览人数: {{count}}</text>
<text>评分:{{score}}</text> -->
<!-- <text>好坏: {{score>8?"好":"差"}}</text> -->
<text>点评:{{item.comment}} </text>
<text wx:if="{{item.isHighlyRecommended}}" style="font-size:16px;color:red;">强烈推荐</text>
<!-- <text hidden="{{!thisWeeklyMovie.isHighlyRecommended}}" style="color: red;font-size:20px;">强烈推荐</text> -->
</view>
</view>
</view>
wxss:
/* .container{
background-color: #eee;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
} */
/* .moive-img{
display: flex;
width: 200rpx;
height: 200rpx;
} */
image{
width: 200rpx;
height: 200rpx;
}
.movie-details{
display: flex;
flex-direction: column;
width: 550rpx;
}
.movie{
display: flex;
margin-top: 20px;
}
11、swipper组件的使用
swipper:滑动容器,常被用来表示幻灯片,轮播图
<view class="container">
<image src="/images/a.jpg" id="img"></image>
<text>电影周周看</text>
<view>
<swiper style="background:#eee;height:260px;" autoplay="true">
<swiper-item>
<!-- 123 -->
<image src="https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640"></image>
</swiper-item>
<swiper-item>
<!-- 234 -->
<image src="https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640"></image>
</swiper-item>
<swiper-item>
<!-- 345 -->
<image src="https://images.unsplash.com/photo-1551446591-142875a901a1?w=640"></image>
</swiper-item>
</swiper>
<text></text> <navigator url="/pages/weekly/weekly" style='display: inline;' open-type="switchTab" hover-class="nav-hover" class="nav-default">每周推荐</navigator><text>一部电影</text>
</view>
<text>我的微博:xxx.weibo.com</text>
</view>
如果要使用循环列表,就在swiper上使用wx:for,在swiperitem上进行属性值的绑定
获取更多内容
获取更多内容请访问: https://juntech.top/
网友评论