1 Star 3 Fork 1

Mantou / 馒头微信小程序组件

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
开发指南.md 3.30 KB
一键复制 编辑 原始数据 按行查看 历史
Mantou 提交于 2020-10-15 10:43 . !2标签页、弹窗、通知开发

Tab 标签页

代码演示

wxml

<mt-tab items="{{items}}" bind:itemtap="itemTap"></mt-tab>

js

Page({
	data: {
		items: ['菜单一', '菜单二', '菜单三', '菜单四', '菜单五', '菜单六']
	},
	
	itemTap(e) {
    	console.log(e)
  	},
})

API

Props

参数 说明 类型 默认值
items 标签页文字数组 Array []
height 标签页高度(单位rpx) String 76
textColor 标签页文字颜色 String #666666
textSize 标签页文字大小 String 28
selectColor 选中文字及下划线颜色 String #0191FF
selected 选中标签页index String 0

Event

事件名 说明 参数
bind:itemtap 点击标签页时触发 detail: 点击标签页的index

Notice 通知

代码演示

wxml

<mt-notice id="notice"/>
<button class="btn" type="primary" bindtap="onShowNotice">弹出通知</button>

js

const { $Notice } = require('components/mt-weapp/mt-notice/index.js')

pageObj({
    data: {
      num: 0
    },
	onShowNotice(){
      this.data.num += 1
      app.$Notice({
        title: '通知标题' + this.data.num,
        content: '这是一条有内容的通知弹窗' + this.data.num,
        show: () => {
          console.log('通知出现的回调函数')
        },
        hide: () => {
          console.log('通知消失的回调函数')
        }
    })
  },
})

API

参数

参数 说明 类型 默认值
title 通知标题 String ‘ ’
content 通知内容 String ‘ ’
show 通知展示后的回调函数 Function
hide 通知隐藏后的回调函数 Function

Dialog 弹窗

代码演示

wxml

<view>
  <button class="btn" type="primary" bindtap="onShowDialog">打开弹窗</button>
  <mt-dialog title='{{title}}' show="{{show}}" bindconfirm="modalConfirm" bindcancel="modalCandel" >
    <view>弹窗内容</view>
  </mt-dialog>
</view>

js

Page({
  data: {
    show: false,
    title: '弹窗标题'
  },

  onShowDialog() {
    this.setData({
      show: true
    })
  },

  modalCandel() {
    this.setData({
      show: false
    })
  },

  modalConfirm() {
    this.setData({
      show: false
    })
  }
})

API

Props

参数 说明 类型 默认值
show 弹窗显示 Boolean false
title 弹窗标题 String
width 弹窗宽度 String 90%
confirmText 确定键文字显示 String 确定
confirmColor 确定键颜色显示 String #0191FF

Event

事件名 说明 参数
bind:confirm 点击确定按键时触发
bind:cancel 点击取消按键时触发
1
https://gitee.com/mantouxsx/mt-weapp.git
git@gitee.com:mantouxsx/mt-weapp.git
mantouxsx
mt-weapp
馒头微信小程序组件
master

搜索帮助