【微信小程序】动态修改page的wxss样式/scroll-view使用/监听子组件_微信小程序page设置样式

动态修改page的wxss样式

静态写法

直接使用下面的写法，是静态的。

page {
    background: #000;
}
1
2
3

动态写法

在wxml最外层套一个自己定义的page的class。

<view class="page"></view>

.page {
  display: block;
  min-height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
1
2
3
4
5
6
7
8
9
10

如果想修改.page的样式，再用普通的动态class判断改变就可以了。

例如：改变背景颜色

<view class='page {{isLightMode?"":"page-night"}}'></view>

isLightMode在js里控制

.page-night{
    background: #000;
}
1
2
3
4
5
6
7

参考：微信小程序如何动态修改page标签的css样式

scroll-view 锚点定位

• 设置id时需要注意下：id 的设置要求是字母开头，且只能包含字母、数字、中划线、下划线、英文冒号和英文句点。
• scroll-view 必须有固定的高度，如果设置高度为百分比的话，父容器一定要固定高度，否则无效
  参考：可以做类似电商锚点跳转效果？

监听子组件

参考：小程序父子组件直接的通信以及实时触发子组件数据更新这篇讲得简单易懂。

// 写法一：可以监听多个属性
observers: {
    'canvasUrl'(data){  // canvasUrl: 父组件传递过来的值
      console.log('路径变化了')
    }
  },
1
2
3
4
5
6

父组件数据更新，子组件也跟着变化