E企盈营销工具技术服务商 热线:4006-838-530

微信小程序Loading组件

E企盈直播平台营销卖货系统

Loading组件这两天都在看微信小程序开发,在看的过程当中,也会自己写写,有的时候,这个时候就会想到,以前项目当中如ReactJs里会有一些公共的组件好多地方都要用到,于就是想着微信小程序里如何提取出来。在小程序里提取公共部分叫template。在其它页面上要用的时候,只要引用就可以了,下面就是如何创建一个的步骤吧,自己也标记一下。效果如下所示,所有完整的代码都github上找到。 创建一个components目录由于我个人喜爱,我会将我所有的组件都会继承一个父类,之前C#经常这样用,将一些通用的方法什么都写到父类里去,子类直接调用父类方法,省此代码量创建一个BaseComponent.js 用于其它组件继承用的里面的代码也很简单 这里写代码片创建一个loading目录添加三个文件 loading.wxml,loading.wxss,loading.js。loading.wxml里的内容name必须要有的,要其它页面的时候要用到的。里面也很简单,一个svg文件,一个显示的内容 Titletemplate name=”XtnLoading”  view class=”loadingCss” bindtap=”onCloseLoading” wx:if=”{{IsShow===true}}”    view class=”content”      image class=”loading” src=”/components/loading/svg/loading.svg” background-size=”cover”/image      view class=”title”{{Title}}/view    /view  /view/template样式文件 也很简单,代码如下所示,.loadingCss {  padding: 0px;  position: fixed;  top: 0px;  left: 0px;  background: rgba(0, 0, 0, 0.2);  height: 100%;  width: 100%;  display: -webkit-box;  -webkit-box-align: center;  -webkit-box-pack: center;  font-size: 16px;}.loadingCss .content {  padding: 20px;  border: 1px solid #fff;  border-radius: 10px;  background: #fff;  text-align: center;}.loadingCss .content .title {  text-align: center;}.loadingCss .content .loading {  width: 48px;  height: 48px;}这时要注意呀,如果要想让他起作用的话,得要在app.wxss里引入一下 loading.js里的代码了。import { Utility, BaseComponent } from ‘../Core’;class loading extends BaseComponent{  constructor() {    super();  }}const Loading = new loading();export { Loading };添加OnInit初始化方法:  /**   * 初始化操作   *    * @memberof loading   */  OnInit() {    // 调用父类方法    this.__Init(Utility);    // 添加事件监听    this.ListenerEvent();    this.data.TData = { Title: ‘加载中…’, IsShow: false };    // 这人很重要,如果想让组件里有事件的话,必须把事件绑定到当前Page上去    // 下面就是将当前类中的事件,绑定到页面上。    this.__CurrentPage.onCloseLoading = this.onCloseLoading.bind(this);    this.__UpdateData();  }OnDestroy 方法  /**   * 销毁事件,请在 页面 onHide 或 onUnload的时候,调用此方法   *    * @memberof loading   */  OnDestroy() {    Object.keys(this.LoadingEventInfo || {}).forEach((key) = {      const value = this.LoadingEventInfo[key];      Utility.$RemoveEvent(key, value);    });  }__UpdateData 方法  /**   * 更新数据,通知页面宣染用的   *    * @memberof loading   */  __UpdateData() {    this.setData(this.data);  }ListenerEvent 监听事件方法,通过监听事件来修改当前template里的数据  /**   * 监听事件方法   *    * @memberof loading   */  ListenerEvent() {    const { onLoading, onLoadingHide } = Utility.$ConstItem.Events.ShowModel;    const self = this;    const __Update = (isShow) = {      this.data.TData.IsShow = isShow;      this.__UpdateData();    };    const LoadingIndex = Utility.$On(onLoading, () = {      __Update(true);    });    const LoadingHide = Utility.$On(onLoadingHide, () = {      __Update(false);    });    const EventInfo = {};    EventInfo[onLoading] = LoadingIndex;    EventInfo[onLoadingHide] = onLoadingHide;    this.LoadingEventInfo = EventInfo;  }onCloseLoading 关闭方法/**   * 关闭操作   *    * @memberof loading   */  onCloseLoading() {    this.data.TData.IsShow = !this.data.TData.IsShow;    this.__UpdateData();  }上面代码就一个组件基本上就OK了,里面用到了一个类 Utility,EventEmitter等,在这里就贴代码了,点击文件名称,就可能查看内容了。引用组件app.js为了以后组件使用方便,在app.js里先把组件引进来。 现在有了组件,那怎么使用呢?在 .wxml里引用组件import src=”../../components/loading/loading.wxml” /引用了,可是在什么地方如何使用它呢?template is=”XtnLoading” data=”{{…TData}}”/or view  template is=”XtnLoading” data=”{{…TData}}”//viewTData 这个在就是要传给组件的数据了,在组件的js里,是不是也能找到 TData 这个东西吧。要自己的类里操作,这样就不用到所在的Page里操作TData了,个人觉得这样代码分开好些。在.js里使用它这样使用方便吧,组件就初始化好了,可以用了。第一图里,点击button的时候,弹出Loading来,button绑定的事件  /**   * 弹出Loading组件,2秒后关闭   *    */  onTapLoading() {    Utility.$Loading();    let times = 2;    this.data.LoadingTitle = ‘将在(‘ + times + ‘)后隐藏’;    this.setData(this.data);    const Interval = setInterval(() = {      times–;      this.data.LoadingTitle = ‘将在(‘ + times + ‘)后隐藏’;      this.setData(this.data);      if (times === 0) {        this.data.LoadingTitle = ‘点击显示Loading弹框’;        Utility.$LoadingHide();        clearInterval(Interval);      }    }, 1000);到这里一个组件就基本上完成好了。本例子的所有代码 点击 这里可以获取, 里面还写一个tabs的组件及使用。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序Loading组件
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏