动态修改page的wxss样式
静态写法
直接使用下面的写法,是静态的。
page {
background: #000;
}
动态写法
在wxml最外层套一个自己定义的page的class。
<view class="page"></view>
.page {
display: block;
min-height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
如果想修改.page的样式,再用普通的动态class判断改变就可以了。
例如:改变背景颜色
<view class='page {{isLightMode?"":"page-night"}}'></view>
isLightMode在js里控制
.page-night{
background: #000;
}
参考:微信小程序如何动态修改page标签的css样式
scroll-view 锚点定位
- 设置id时需要注意下:id 的设置要求是字母开头,且只能包含字母、数字、中划线、下划线、英文冒号和英文句点。
- scroll-view 必须有固定的高度,如果设置高度为百分比的话,父容器一定要固定高度,否则无效
参考:可以做类似电商锚点跳转效果?
监听子组件
参考:小程序父子组件直接的通信以及实时触发子组件数据更新这篇讲得简单易懂。文章来源:https://www.toymoban.com/news/detail-744052.html
// 写法一:可以监听多个属性
observers: {
'canvasUrl'(data){ // canvasUrl: 父组件传递过来的值
console.log('路径变化了')
}
},
父组件数据更新,子组件也跟着变化文章来源地址https://www.toymoban.com/news/detail-744052.html
到了这里,关于【微信小程序】动态修改page的wxss样式/scroll-view使用/监听子组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!