首先创建一个components组件
properties属性
在小程序组件中,properties是组件的对外属性,用来接收外界传递到组件中的数据
在js文件里
Component({})里面
properties: {
name:String
},
data: {
watermarkText:'闽达钢铁'
},
lifetimes:{
attached(){
this.setData({
watermarkText:this.data.watermarkText + this.properties.name
})
}
},
在wxml里
<view class="water_top" style="pointer-events: none;">
<view class="water-text">{{watermarkText}}</view>
<view class="water-text">{{watermarkText}}</view>
<view class="water-text">{{watermarkText}}</view>
<view class="water-text">{{watermarkText}}</view>
<view class="water-text">{{watermarkText}}</view>
<view class="water-text">{{watermarkText}}</view>
<view class="water-text">{{watermarkText}}</view>
<view class="water-text">{{watermarkText}}</view>
<view class="water-text">{{watermarkText}}</view>
</view>
wxss
/* components/watermark/watermark.wxss */
.water_top{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
transform:rotate(-12deg); /** 旋转 可自己调整 **/
z-index: 1;
}
.water-text{
float: left;
width:375rpx;
/* color: rgba(169,169,169,.2); */
color: gray;
text-align: center;
font-size: 95%;
margin: 100rpx 0; /** 间距 可自调 **/
}
然后再需要的用的页面最上面复用 <watermark name="你好"></watermark>