2019/04/17
1.第一个界面
<!--index.wxml-->
<view class='main'>
<image src='/images/chimchim.jpg'></image>
<text class='t1'>电影周周看</text>
<view>
<navigator hover-class='nav-hover' style='display:inline;' url='/pages/weekly/weekly' open-type='switchTab'>每周推荐</navigator><text>一部好电影</text>
</view>
<text>我的微博:SUGA‘s Day Ala susu</text>
</view>
open-type=‘redirect’ 在使用了tabbar之后就不能用了
navigator为超链接
hover-class='nav-hover’为鼠标点击链接时的类
/* index.wxss */
image{
width: 375rpx;
height: 375rpx;
border: 3px solid pink;
border-radius: 50%;
}
.t1{
font-size: 60rpx;
font-weight: 800;
}
.nav-hover{
color: #FF6699;
}
/**app.wxss**/
.main{
background:ghostwhite;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}//弹性布局,为第一个与第二个界面共同的style
2.第二个界面
<!-- weekly.wxml -->
<view class='main'>
<text>本周推荐</text>
<image src='/images/star.jpg'></image>
<text>A Star Is Born</text>
<text>SUGA's 推荐,绝对完美</text>
</view>
image{
width: 200px;
height: 300px;
}
3.tabbar的使用
app.json文件内
{
"pages":[
"pages/index/index",
"pages/weekly/weekly"
],
"tabBar":{
"list":[
{
"text":"每周推荐",
"pagePath":"pages/weekly/weekly",
"iconPath":"images/流派.png",
"selectedIconPath":"images/更多.png"
},
{
"text": "关于",
"pagePath": "pages/index/index",
"iconPath": "images/我.png",
"selectedIconPath": "images/云.png"
}
],
"color": "black",
"selectedColor": "pink"
},
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#FF6699",
"navigationBarTitleText": "YIHUA",
"navigationBarTextStyle":"white"
}
}
必须有"pages"才能显示页面
“tabBar”:{ “list”:[ 为底部导航栏
4.配置全局导航栏样式
在app.json中:
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#FF6699",
"navigationBarTitleText": "YIHUA",
"navigationBarTextStyle":"white"
}