微信小程序开发教程之自定义toast实例

2018/8/2 19:46:51
摘要: 自从小程序发布以后,越来越多的开发者投入到小程序的开发当中去,而且微信有着相当完善的API和组件,使用起来简单

自从小程序发布以后,越来越多的开发者投入到小程序的开发当中去,而且微信有着相当完善的API和组件,使用起来简单,但是无奈,官方对API和组件的限制太多,想将这些官方的组件或者API运用到实际当中不太可能,所以一下将介绍怎么去写一个自定义的toast组件。

首先,先看一下官方的API的展示形式

微信小程序开发教程

 用法很简单,直接拷贝官方代码就好,代码如下:

Wx.showToast({

Title:’成功’,

Icon:’success’,

duration:2000

})

下面我将分享怎么自定义toast组件

1、现在component目录下新建一个toastTest目录

2、在toasTest。wxml文件里面新建一个自定义组件模块template,代码如下:

<template name=”toast”>

<view class=”toast_content_box” wx:if=”{{isHide}}”>

<view class=”toast_content”>

<view class=”toast_content_text”>

{{content}}

</view>

</view>

</view>

</view>

</template>

3、接下来就是样式代码,代码如下:

.toast_content_box{

display:flex;

width:100%;

height:100%;

justify_content:center;

align-items:center;

position:fixed;

z-index:999;

}

。toast_conten{

width:50%;

padding:30rpx;

background:rgba(0,0,0,0。8);

broder-radius:20rpx;

}

。toast_conten_text{

width:100%;

height:100%;

color:#fff;

font-size:28rpx;

text-align:center;

}

4、toastTest.js代码如下:

let _compDate={

'_toast_。isHide':false,

'_toast_.content':''

}

let toastPannel={

show:function(data){

let self = this;

this.setData({ '_toast_.isHide':true, '_toast_.content':data});

setTimeout(function(){

self.setData({'_toast_.isHide':false})

},3000)

}

}

 

function ToastPannel(){

let pages = getCurrentPages();

let curPage = pages[pages。length - 1 ];

this。_page=curPage;

Object.assign(curPage,toastPannel);

curPage.toastPannel=this;

curPage。setData(_compDate);

return this;

}

 

module。exprorts={

ToastPannel

}

其中的toastPannel对象中包含一些自定义方法,ToastPannel是一个构造函数

 

5、在app。js中将组件脚本注入全局

//app.js

import{ToastPannel} from './component/toastTest/toastTest'

app({

ToastPannel,

})

然后再全局中引入组件样式表:

@import "./component/toastTest/toastTest.wxss";

 

6、在需要该组件的页面将模块注入

<import src="../../component/toastTest/toastTest.wxml"/>

<template is="toast" data="{{。。。_toast_}}"/>

<view bindtap="openToastPannel">toastTest测试</view>

 

7、在当前的JS文件中实例构造函数

 Page({

data:{

content:'自定义toast组件'

},

onLoad:function(){

let app = getApp();

new app.ToastPannel();

},

openToastPannel:function(){

this.show(this.data.content);

}

})

 

8、这就是自定义toast的实现效果啦

微信小程序教程


声明:文章"微信小程序开发教程之自定义toast实例"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序干货
电话咨询:18011971195(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 小程序开发亮点:微信小程序的价值所在

    关于小程序开发,目前还是处于一个初级阶段,但这并不代表它没有价值

  • 微信小程序开发过程必须解决的几大问题

    开发者在选择进入到微信小程序市场中的时候,首先要触及到的就是市场需求定位、开发团队组建、宣传推广问题以及数据监测问题。这几个方面是在策划

  • 初创企业开发微信小程序会有什么好处

    相比起APP开发,微信小程序开发对于刚刚步入创业阶段的企业来说会是更好的选择,在资金、人力、物力都还不成熟的阶段,企业开发小程序会比开发App获得更多的好处。这些好处主要就有以下三个部分:

  • 从开发公司角度谈微信小程序开发的实践问题

    作为一个对微信小程序开发与运营有一定了解的开发公司小编,对于一些在开发工作期间的注意事项以及开发后的管理、运营问题

  • 微信小程序开发技术教程:视图容器组件详解(三)

    接上次视图容器组建详解(一)与(二),我们今天把最后两个组件样式

  • 闪开发票+自助打印小程序解决方案加快报销进程

    前一阵子微信官方开放的闪开发票的功能,一经推出就受到广大用户的支持与使用,不过这个功能也只是支持在开发的时候,可以直接将自己之前在“微信发票助手”中的开票信息传输给开票工作人员而已,并不是整个开票流程都是全自助化

欢乐城彩票网 江苏快3官网 28彩票官网 河北快3走势图 2m彩票官网 河北快3 江苏快3官网 河北快3 159彩票 265彩票官网