读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. 小程序
  3. 正文

小程序自定义简易的提示组件

2020年10月15日 201点热度 0人点赞 0条评论

效果图:

小程序自定义简易的提示组件插图

 

源码:

wxml:

<!-- 简易的提示组件 -->
<view class="dxui-toptips-container {{state==='success'?'dxui-toptips-success':''}} {{state==='warn'?'dxui-toptips-warn':''}}  {{state==='error'?'dxui-toptips-error':''}}">
  {{msg}}
</view>

css:

.dxui-toptips-container {
  width: 80%;
  height: 50rpx;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
}

.dxui-toptips-success {
  background: #00d060;
  color: #fff;
}

.dxui-toptips-warn {
  background: #ff8c00;
  color: #fff;
}

.dxui-toptips-error {
  background: red;
  color: #fff;
}

js:

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //  
  msg:{
    type:String,
    value:""
  },
  state:{
    type:String,
    value:""
  }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    
  }
})

 

 

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小程序
最后更新:2020年10月15日

读心悦

韦永愿的个人博客

打赏 点赞
< 上一篇
下一篇 >

文章评论

您需要 登录 之后才可以评论

读心悦

韦永愿的个人博客

标签聚合
悦读 git react 小程序 Nginx redux Echarts flutter JavaScript node canvas 闲谈 随笔 mysql taro hook 阅读 vue CSS
分类
  • flutter (11)
  • html/css (23)
  • Javascript (32)
  • Mysql (2)
  • node (2)
  • React (29)
  • vue (1)
  • 小程序 (43)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (12)
最新 热点 随机
最新 热点 随机
JavaScript的深浅拷贝【笔记】 最近的一些心里事儿 JavaScript的Object数据类型转换 JavaScript中 + 隐式类型转换 JavaScript的== 的隐式类型转换 JavaScript数据强制类型转换
微信小程序设置体验版本和线上版本的访问地址JavaScript颜色的工具函数redux简单的笔记JavaScript的数据类型如果有来生JavaScript数据强制类型转换
JavaScript的== 的隐式类型转换 2020上半年书单 用Git上传和管理代码 我很惧怕换一个城市 JavaScript计算时间差 js复制粘贴功能

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号