TopTips 顶部提示

使用指南

在 index.json 中引入组件

{
  "usingComponents": {
    "zan-toptips": "path/to/zanui-weapp/dist/toptips/index"
  }
}

在 index.js 中声明组件数据

toptips提供了声明式和命令式2种调用方式，但是由于小程序本身限制，会有一定使用的要求

// 使用声明式调用的方式， 必须在Page中声明 - zanui对象， 结构如下
// 同时在其他触发toptips显示的函数中，需要手动改变对应的数值
Page({
  data: {
    duration: 1000,
    content: 'xxx',
    - zanui: {
      toptips: {
        show: false
      }
    }
  }
})
// 使用命令式调用的方式，必须在 wxml 模板中声明组件id，
// 默认我们使用了 zan-toptips， 如果使用者要更换，可以手动传入
const Toptips = require('path/to/zanui-weapp/dist/toptips/index');
Page({
  customCallback() {
    Toptips('只穿文案展示');
  }
})

代码演示

声明式调用

使用声明式调用

Page({
  data: {
    duration: 1000,
    content: 'xxx',
    - zanui: {
      toptips: {
        show: false
      }
    }
  },
  customCallback() {
    this.setData({
      - zanui: {
        toptips: {
          show: true
        }
      }
    });
    setTimeout(() => {
      this.setData({
        - zanui: {
          toptips: {
            show: false
          }
        }
      })
    }, this.data.duration);
  }
})

<zan-toptips
  content="tip内容"
  duration="{{ duration }}"
  is-show="{{ - zanui.toptips.show }}"
/>

命令式调用

Page({
  customCallback() {
    Toptips('我只改文案')
  }
})

<zan-toptips
  id="zan-toptips"
  contetn="{{ content }}"
/>

修改组件id

Page({
  customCallback() {
    Toptips({
      content: '传入其他参数',
      selector: '#other-id',
      duration: 5000
    })
  }
})

<zan-toptips
  id="other-id"
  contetn="{{ content }}"
/>

微信扫一扫

原文:

https://www.youzanyun.com/zanui/weapp#/zanui/interactive/toptips