效果圖

index

log

建立 Component

watermark.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>
 

watermark.wxss

.water_top{
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  transform:rotate(-12deg); /** 旋轉 可自己調整 **/
  z-index: 9999;
}
.water-text{
  float: left;
  width:375rpx;
  color: rgba(169,169,169,.2);
  text-align: center;
  font-size: 95%;
  margin: 100rpx 0; /** 間距 可自調 **/
}

watermark.js

// components/watermark/watermark.js
Component({
  /**
   * 元件的屬性列表
   */
  properties: {
    name:String
  },

  /**
   * 元件的初始資料
   */
  data: {
    watermarkText:'閩達鋼鐵'
  },

  /**
   * 元件生命週期宣告物件，元件的生命週期
   * ：created、attached、ready、moved、detached 
   * 將收歸到 lifetimes 欄位內進行宣告
   * 原有宣告方式仍舊有效，如同時存在兩種宣告方式
   * 則 lifetimes 欄位內宣告方式優先順序最高
   */
  lifetimes:{
    attached(){
      this.setData({
        watermarkText:this.data.watermarkText + this.properties.name
      })
    }
  },

  /**
   * 元件的方法列表
   */
  methods: {

  }
})

 

app.json 全域性引用

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",

  /* 引入 tips：刪除引入註釋  放入程式碼會報錯 */ 
  "usingComponents": {
    "watermark":"/components/watermark/watermark"
  }
}

介面使用元件 index.wxml

<!-- 放入頂部即可 -->
<watermark name="班長"></watermark>

log.wxml

<!--logs.wxml-->

<watermark name="張大梅"></watermark>

<view class="container log-list">
  <block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log.date}}</text>
  </block>
</view>

demo 原始碼地址

https://git.weixin.qq.com/depressiom/demo.git