首页 > 编程语言> 文章详细

微信小程序界面水印实现

2022-05-11 12:02:11 阅读：226 来源： 互联网

标签：index 界面 log watermark 微信水印 watermarkText lifetimes 组件

效果图

index

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

标签：index,界面,log,watermark,微信,水印,watermarkText,lifetimes,组件
来源： https://www.cnblogs.com/depressiom/p/16257386.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

微信小程序 界面水印实现

效果图