watermark.js 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. // components/watermark/watermark.js
  2. Component({
  3. /**
  4. * 组件的属性列表
  5. */
  6. properties: {
  7. // 父组件高度
  8. height: {
  9. type: Number,
  10. observer(data) {
  11. // 当传值进来时 触发方法
  12. this.watermark(data)
  13. }
  14. }
  15. },
  16. /**
  17. * 组件的初始数据
  18. */
  19. data: {
  20. watermark: [] //水印位置集合方法
  21. },
  22. ready() {
  23. // 当组件准备好时触发 先行触发 然后覆盖减少突然出现水印的概率
  24. this.watermark()
  25. },
  26. /**
  27. * 组件的方法列表
  28. */
  29. methods: {
  30. // 生成水印位置集合方法
  31. watermark(height) {
  32. // 获取当前系统信息
  33. const system = wx.getSystemInfoSync();
  34. const _height = system.windowHeight > height ? system.windowHeight : height;
  35. // 计算水印行数
  36. const row = Math.floor(_height * (750 / system.windowWidth) / 201);
  37. const json = [];
  38. for (let i = 0; i < row; i++) {
  39. json.push([])
  40. let _tmp = i % 2;
  41. // 奇数行三个 偶数行两个
  42. if (_tmp) {
  43. for (let j = 0; j < 2; j++) {
  44. json[i].push({
  45. top: 30 + 201 * i,
  46. left: 160 + 245 * j
  47. })
  48. }
  49. } else {
  50. for (let j = 0; j < 3; j++) {
  51. json[i].push({
  52. top: 30 + 201 * i,
  53. left: 30 + 260 * j
  54. })
  55. }
  56. }
  57. }
  58. this.setData({
  59. watermark: json
  60. })
  61. }
  62. }
  63. })