微信小程序自定义组件，提示组件

微信小程序自定义组件，这里列举了一个常用的提示自定义组件，调用自定义组件中的方法和字段。仅供参考和学习。

编写组件：

在根目录下添加“components”目录，然后像添加Page页面一样添加自定义组件"tips"

文件结构跟page一样，有自己的js逻辑，json配置文件，标签wxml，样式文件wxss。这里使用的是weui的样式库。

tips.wxml：

<view class="weui-toptips weui-toptips_warn"  hidden="{{showTopTips}}">{{msg}}</view>

tips.js

// components/tips/tips.js
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {showTopTips: true,msg: '提示'},/*** 组件的方法列表*/methods: {showDialog(msg) {wx.showModal({title: '提示',content: msg,})},showTopTip: function(msg) {let that = this;that.setData({showTopTips: false,msg: msg});setTimeout(function() {that.setData({showTopTips: true});}, 1500);}}
})

tips.wxss

/* components/tips/tips.wxss *//*在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。*/.inner {color: red;
}.weui-toptips_warn {background-color: #e64340;
}.weui-toptips {position: fixed;-webkit-transform: translateZ(0);transform: translateZ(0);top: 0;left: 0;right: 0;padding: 5px;font-size: 14px;text-align: center;color: #fff;z-index: 5000;word-wrap: break-word;word-break: break-all;
}

View Code

下面做一个测试页调用

/pages/test页进行测试

1、首先test.json配置中引用tips自定义组件：

{"usingComponents": {"mytips": "/components/tips/tips","dialog": "/components/dialog/dialog"}
}

2、test.wxml 中添加自定义组件标签

<mytips id='mytips'></mytips>
<view class='container'><button type='primary' size='default' bindtap='showTip'>提示</button>
</view>

3、test.js 调用自定义组件中的方法和字段赋值

// pages/test/test.js
var tips ;
Page({/*** 页面的初始数据*/data: {com_data:'',showTopTips:false,msg:''
},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({com_data:'test 设置属性值'})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {//获得mytips组件tips = this.selectComponent("#mytips")//获得dialog组件//this.dialog = this.selectComponent("#dialog");
  },showTip: function () {//tips.showDialog('jbbbbbbbb');//returntips.showTopTip('提示内容。。。');},showDialog() {this.dialog.showDialog('显示的内容');},//取消事件
  _cancelEvent() {console.log('你点击了取消');this.dialog.hideDialog();},//确认事件
  _confirmEvent() {console.log('你点击了确定');this.dialog.hideDialog();}
})

View Code

到此自定义组件的定义和使用已经告一段落。

效果显示：在页面顶端显示提示内容。

转载于:https://www.cnblogs.com/tongyi/p/10899893.html

微信小程序自定义组件，提示组件相关推荐

微信小程序自定义导航栏组件
效果图首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏一.子组件-wxml <vi ...
ithoughts怎么自定义样式_微信小程序自定义导航栏组件封装
相信很多小伙伴在开发微信小程序的时候都会有自定义顶部导航栏的需求,不够要说明的是小程序右上角的胶囊是不能自定义的哦,除了胶囊其他地方都是可以根据自己的项目而定了,在一次小程序开发中就需要对顶部进行自定 ...
微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义modal弹窗组件
微信小程序开发中官方自带的wx.showModal,这个弹窗 API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用, ...
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中页面的 title 只支持纯文本级别的样式控 ...
微信小程序自定义弹框组件
话不多说直接上代码目录 1.wxml 2.js 3.wxss 4.json 5.效果展示(具体内容可以自定义) 1.wxml <!--pages/components/confirmBox/c ...
微信小程序自定义card图文组件
//组件wxml<view class="home-party" style="padding-top:10px;"> <view>&l ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...

微信小程序自定义组件，提示组件

微信小程序自定义组件，提示组件相关推荐

最新文章

热门文章