在你的项目目录中添加组件components目录(定义成组件方便项目调用)
组件
wxml:
<!--components/waterMark.wxml-->
<view class='water-mark'>
<view class='row' wx:for="{{rows}}" wx:key="index">
<view class='col' wx:for="{{cols}}" wx:key="index" style="color:{{color}};font-size:26rpx;">{{text}}</view>
</view>
</view>
wxss:
/* components/waterMark.wxss */
.water-mark-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
display: flex;
flex-direction: row;
justify-content: space-between;
pointer-events: none;
flex:1;
}
.row{
display: flex;
flex-direction: column;
align-items: center;
}
.col{
transform: rotate(-45deg);
height: 200rpx;
}
json:
{
"component": true
}
js:
Component({
data: {
text: 'Yancey',
color: 'rgba(0,0,0,0.2)',
rows: [],
cols: []
},
// 组件在页面上挂载时触发,注意如果页面没卸载过,该事件就不会触发第二次
attached() {
const { windowWidth, windowHeight } = wx.getSystemInfoSync();
const rows = Math.ceil(windowWidth / (20 * this.data.text.length));
const cols = Math.ceil(windowHeight / 100);
const waterMark=wx.getStorageSync('waterMark')
this.setData({
rows: new Array(rows),
cols: new Array(cols)
});
},
})
组件调用
json:
{
"navigationBarTitleText": "基本信息",
"usingComponents": {
"water-mark": "../../components/waterMark"
}
}
wxml:
<!-- 水印组件 -->
<water-mark></water-mark>