PHP中文网-QQ群-扫二维码

QQ群

PHP中文网-关注微信公众号-扫二维码

微信公众号

仿照微信小程序提供的showToast功能

2018-06-14 来源/作者:php中文网 分类:小程序源码 «» 下载次数:1
仿照微信小程序提供的showToast功能
WeTaost插件源码位于src目录下,包含3个文件。
wetoast.js: 脚本代码
wetoast.wxml: 模板结构
wetoast.wxss: 样式
使用时只需要加入以上3个文件即可,使用方法可参考本项目示范。

推荐方案

Step1、在项目的app.js中引入wetoast.js,并注册到小程序上,小程序所有Page页面均可使用,无需再次引入

let {WeToast} = require('src/wetoast.js')    // 返回构造函数,变量名可自定义
App({
WeToast    // 后面可以通过app.WeToast访问
})
Step2、在项目的app.wxss中引入wetoast.wxss

@import "src/wetoast.wxss";
Step3、引入WeToast模板结构,

方式一,在单独页面使用

<!-- 文件 index.wxml 中 -->
<import src="../../src/wetoast.wxml"/>
<template is="wetoast" data="{{...__wetoast__}}"/>
方式二,创建公用包含文件,将所有公用模板放在一起

<!-- 文件 footer.wxml 中 -->
<import src="src/wetoast.wxml"/>
<template is="wetoast" data="{{...__wetoast__}}"/>
<!-- 其他xxoo模板 -->
<template is="wexxoo" data="{{...wexxoo}}"/>
然后通过include引入

<!-- Page文件 index.wxml 底部 -->
<include src="footer.wxml"/>
效果预览本地下载  新手使用求助QQ群: