随笔 - 122,  文章 - 2,  评论 - 2,  阅读 - 53577

效果图

index

index

log

log

创建 Component

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

posted on   depressiom  阅读(451)  评论(1编辑  收藏  举报
相关博文:
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!
< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示