動態(tài)修改page的wxss樣式
靜態(tài)寫法
直接使用下面的寫法,是靜態(tài)的。
page {
background: #000;
}
動態(tài)寫法
在wxml最外層套一個自己定義的page的class。
<view class="page"></view>
.page {
display: block;
min-height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
如果想修改.page的樣式,再用普通的動態(tài)class判斷改變就可以了。
例如:改變背景顏色
<view class='page {{isLightMode?"":"page-night"}}'></view>
isLightMode在js里控制
.page-night{
background: #000;
}
參考:微信小程序如何動態(tài)修改page標簽的css樣式
scroll-view 錨點定位
- 設置id時需要注意下:id 的設置要求是字母開頭,且只能包含字母、數(shù)字、中劃線、下劃線、英文冒號和英文句點。
- scroll-view 必須有固定的高度,如果設置高度為百分比的話,父容器一定要固定高度,否則無效
參考:可以做類似電商錨點跳轉效果?
監(jiān)聽子組件
參考:小程序父子組件直接的通信以及實時觸發(fā)子組件數(shù)據(jù)更新這篇講得簡單易懂。文章來源:http://www.zghlxwxcb.cn/news/detail-744052.html
// 寫法一:可以監(jiān)聽多個屬性
observers: {
'canvasUrl'(data){ // canvasUrl: 父組件傳遞過來的值
console.log('路徑變化了')
}
},
父組件數(shù)據(jù)更新,子組件也跟著變化文章來源地址http://www.zghlxwxcb.cn/news/detail-744052.html
到了這里,關于【微信小程序】動態(tài)修改page的wxss樣式/scroll-view使用/監(jiān)聽子組件的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!