微信小程序 界面水印实现
效果图
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
微信小程序 界面水印实现相关推荐
- 微信小程序界面跳转（2）——按钮
微信小程序界面跳转(2)--按钮 步骤一:创建一个新界面catPage界面: 先在pages文件夹下创建一个新的文件夹:catPage.单击右键,创建page,page名称和文件夹名称一致.最后创建结 ...
- 微信小程序-增加水印（自定义内容）
Number1 微信小程序增加水印 最近在整微信小程序,这里增加写自己最近用到的东西(仅为记录) 主要原则是增加一个水印的组件,新建components文件夹,在文件夹下面新建watermark组件 ...
- 微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-style字体风格
font-style字体风格 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 基础用法 font- ...
- 微信小程序界面设计入门课程-样式wxss中使用css课程-文本-direction 文本方向
样式wxss中使用css课程-文本-direction 文本方向 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/hua ...
- 短视频微信小程序界面
# 短视频微信小程序界面 ##**项目介绍**: 1.结合tabBar实现分类下视频展示 2.自媒体展示并点击获取自媒体信息 3.用户登录.注册.密码找回功能 ##**视频页** ##**自媒体页** ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:focus 伪类
小程序中的WXSS(css)选择器课程-伪类-:focus 伪类 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/hua ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:checked 伪类(不支持)
小程序中的WXSS(css)选择器课程-伪类-:checked 伪类(不支持) 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/to ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-::before伪元素
小程序中的WXSS(css)选择器课程-::before伪元素 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huan ...
- 视频教程-微信小程序界面设计-样式入门到精通-微信开发
微信小程序界面设计-样式入门到精通 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥66.00 立即订阅 ...
最新文章
- 剑指offer：面试题13. 机器人的运动范围
- 你在 Docker 中跑 MySQL？恭喜你，可以下岗了！
- 中国内地高校ESI排名出炉：342所大学上榜
- linux下载哪个python版本-修改linux下python的默认版本
- mysql5.6，基于GTID的主从同步与延迟复制
- ST17H26开发小总结
- 11gR2 RAC手动添加节点数据库实例
- net core 获取网站目录
- 快准狠！Intel论文揭示自家车牌识别算法:LPRNet
- aliy 数据库连接池加密_Druid数据库连接池 实现数据库账号密码加密
- 一个人内心强大的4个迹象
- CSS选择器(随笔)
- /home/image/.conda/envs/tensorflow/lib/python3.6/site-packages/tensorflow/python/framework/dtypes.py
- PC端微信聊天记录备份文件在哪儿？
- origin画图畸变
- android 如何关闭app,android 关闭app程序
- B. Petya and Exam
- ffmpeg 4.2.1 版本升级日志 APIChanges
- 写一个WFP驱动，拦截网络
- Skype for Business Server 2015-04-前端服务器-2-创建一个文件共享