或者把样式写在wxss中
要做出来的效果图：
怎么动态的改变导航栏的文字？
传统实现:
但是传统方式布局目标的实现属性赋值非常分散；严重依赖页面结构与内容实际大小 如果此时又多个text标签呢，那个margin-bottom的值就不是那么合适了，要重新写
弹性盒子：
弹性盒子布局相关的wxss属性赋值比较统一 弹性盒子布局方式灵活
没有去计算间隔的大小，实现的是人工布局，比较灵活
.about-banner{ width:375rpx; height: 375rpx; border-radius: 50%; }
<!--pages/weekly/weekly.wxml--> <view class="container"> <text>本周推荐</text> <image src="/images/jf.jpg"></image> <text>教父</text> <text>点评：最精彩的剧本，最真实的黑帮电影</text> </view>
open-type默认值navigate，可返回的 redirect 不可以返回的 注意：text标签只能识别纯文本，其他都无效
/* pages/about/about.wxss */ /* .container{ background-color: #eee; height: 100vh; text-align: center; } text{ display: block; } text,image{ margin-bottom: 40px; } */ .container{ background-color: #eee; height: 100vh; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .about-banner{ width:375rpx; height: 375rpx; border-radius: 50%; } .nav-hover{ color:red; } .nav-default{ color:green; } <!--pages/about/about.wxml--> <view class="container"> <image class="about-banner"src="/images/simbasong.jpg"></image> <text style="font-weight:bold;font-size:60rpx;">电影周周看</text> <view> <text>我</text> <navigator style='display: inline;' url='/pages/weekly/weekly' open-type="navigate" class="nav-dafault" hover-class="nav-hover">每周推荐</navigator> <text>一部好片</text> </view> <text>我的wechat是：weixin.com/qxy</text> <text>this is boiling island</text> <text>i am EDA</text> <text>Welcome our country</text> </view>但是结果navigator默认的颜色为绿色显示了，但是点击后成没有出现红色
因为样式选择器的一样的时候，就越在后面优先级越高 所以上面的hover-default优先级高，所以点击后还是会显示绿色而不是红色 下面把nav-hover放在最后面，最后点击“每周推荐”字体会变成红色而且跳入weekly页面
app.json:
{ "pages":[ "pages/about/about", "pages/weekly/weekly" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "tabBar": { "color": "#000000", "selectedColor": "#66CDAA", "borderStyle": "black", "backgroundColor": "#F0F8FF", "list": [ { "pagePath": "pages/weekly/weekly", "text": "每周推荐", "iconPath": "images/tabbar/weekly.png", "selectedIconPath": "images/tabbar/weekly-selected.png" }, { "pagePath": "pages/about/about", "text": "关于", "iconPath": "images/tabbar/about.png", "selectedIconPath": "images/tabbar/about-selected.png" } ] }, "style": "v2", "sitemapLocation": "sitemap.json" }但是原来的about 页面的元素点击无效 解决方法： 改下navigator的open-type为switchTab
也就是每一次需要手动修改WXML的值
在AppData可以看见：
<!--pages/weekly/weekly.wxml--> <view class="container"> <text>本周推荐</text> <image src="{{thisWeekMovie.imagePath}}"></image> <text>{{thisWeekMovie.name}}</text> <text>{{thisWeekMovie.comment}}</text> <text>数目为:{{count}}</text> <text>分数为:{{score}}</text> <text>{{(score>60)?"及格":"不及格"}}</text> <text>{{score+count}}</text> </view> // pages/weekly/weekly.js Page({ /** * 页面的初始数据 */ data: { thisWeekMovie:{ name:"教父", comment:"最精彩的剧本，最真实的黑帮电影。", imagePath:"/images/icon/jf.jpg" }, count:24, score:36 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })weekly.json
{ "usingComponents": {}, "navigationBarTitleText": "每周推荐" }