微信小程序 界面水印实现

互联网 2022/5/11 12:43:24

效果图 indexlog创建 Componentwatermark.wxml <view class="water_top" style="pointer-events: none;"><view class="water-text">{{watermarkText}}</view><view class="water-text">{{watermarkText…

效果图

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

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[微信小程序 界面水印实现]http://www.zyiz.net/tech/detail-320116.html

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>