Component({
//1.组件的需要渲染的数据
properties: {
//属性值可以在组件使用时指定
isShow: {
type: Boolean,
value: false,
},
},
// 这里是一些组件内部数据
data: {
isValue: false,
},
methods: {
//页面方法
preventTouchMove() {},
closeModel() {
this.setData({
isShow: false,
});
//获取组件内data的数据
console.log(this.data.isValue);
//获取渲染的properties的数据
console.log(this.properties.isValue);
},
},
});
created
:在组件实例进入页面节点树时执行,注意此时不能调用 setData
attached
:在组件实例进入页面节点树时执行, this.data 已被初始化为组件的当前值,绝大多数初始化工作可以在这个时机进行。ready
:在组件布局完成后执行,此时可以获取节点信息(使用 SelectorQuery)moved
:在组件实例被移动到节点树另一个位置时执行。detached
:在组件实例被从页面节点树移除时执行。Component({
created: function () {
// 组件生命周期函数,在组件实例进入页面节点树时执行,
//注意此时不能调用setData
console.log("Component-1 >> created");
},
attached: function () {
// 组件生命周期函数,在组件实例进入页面节点树时执行。
console.log("Component-1 >> attached");
},
ready: function () {
// 在组件布局完成后执行,此时可以获取节点信息
// (组件生命周期函数-在组件布局完成后执行)
console.log("Component-1 >> ready");
},
moved: function () {
// 在组件实例被移动到节点树另一个位置时执行
console.log("Component-1 >> moved");
},
detached: function () {
// 在组件实例被从页面节点树移除时执行
console.log("Component-1 >> detached");
},
lifetimes: {
// 组件生命周期声明对象,将组件的生命周期收归到该字段进行声明///,
//原有声明方式仍旧有效,如同时存在两种声明方式
// ,则lifetimes字段内声明方式优先级最高
created: function () {
console.log("Component-1 lifetimes >> created");
},
attached: function () {
console.log("Component-1 lifetimes >> attached");
},
ready: function () {
console.log("Component-1 lifetimes >> ready");
},
moved: function () {
console.log("Component-1 lifetimes >> moved");
},
detached: function () {
console.log("Component-1 lifetimes >> detached");
},
},
pageLifetimes: {
// 组件所在页面的生命周期声明对象,
//目前仅支持页面的show和hide两个生命周期
show: function () {
console.log("Component-1 pageLifetimes >> Show");
},
hide: function () {
console.log("Component-1 pageLifetimes >> Hide");
},
},
});
App({
/**
* 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
*/
onLaunch: function () {
var userInfo = wx.getStorageSync('userInfo');
if (userInfo) {
this.globalData.userInfo = userInfo;
}
},
onShow(): function() {
console.log('onShow监听小程序显示');
},
onHide(): function() {
console.log('onLaunch监听小程序隐藏');
},
###
Page({
data: {},
onLoad: function (options) {
// 生命周期函数--监听页面加载
console.log("onLoad");
},
onReady: function () {
// 生命周期函数--监听页面初次渲染完成
console.log("onReady");
},
onShow: function () {
// 生命周期函数--监听页面显示
console.log("onShow");
},
onHide: function () {
// 生命周期函数--监听页面隐藏
console.log("onHide");
},
onUnload: function () {
// 生命周期函数--监听页面卸载
console.log("onUnload");
},
onPullDownRefresh: function () {
// 页面相关事件处理函数--监听用户下拉动作
console.log("onPullDownRefresh");
},
onReachBottom: function () {
// 页面上拉触底事件的处理函数
console.log("onReachBottom");
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
});
)
(document).ready(function())
简写为
(function(){});
index.json
{ "usingComponents": { "v-select": "/component/select/select" } }
注意事项:
v-select 是你定义的组件的名称,后面的是组件所在的位置。/
单斜杠表示根目录,是绝对路径。 如果控制台报错,出现没找到路径的情况,一定是自己填写的路径不对,认真检查路径代码。
index.wxml
<v-select select-array='{{selectArray}}' bind:getNowData='getCurrentTextAction' current-text="{{current_text}}"></v-elect>
例如:selectArray
。在引入组件的 wxml 中,指定属性值时则对应使用连字符写法例如:select-array=',selectArray为select组件中所需展示的数据源
。index.js
getCurrentTextAction(e){
let item = e.detail;
this.setData({
current_text: item.name,
current_type: item.type
});
}
在 component 文件目录下,创建一个 select 文件夹,随后 select 文件夹下手动创建:select.js、select.json、select.wxml、select.wxss 四个文件。
select.json
{
"component": true
}
select.wxml
<view class="section-select-box">
<view class="select-content" bindtap="selectToggleAction">
<view class="select-text">{{currentText}}</view>
<image
class="select-img"
src="../../images/icon_arrow_down.png"
animation="{{arrowAnimation}}"
></image>
</view>
<view class="select-list" wx:if="{{isShow}}">
<view
class="select-list-item"
wx:for="{{selectArray}}"
data-index="{{index}}"
wx:key="{{index}}"
bindtap="selectItemAction"
>{{item.name}}</view
>
</view>
</view>
select.js
Component({
/**
1. 组件的需要渲染的数据
*/
properties: {
selectArray: {
type: Array,
},
// 初始时要展示的内容
currentText: {
type: String,
},
},
/**
2. 是组件的内部数据
*/
data: {
isShow: false, // 初始option不显示
},
/**
3. 组件的方法列表
*/
methods: {
//option的显示与否
selectToggleAction: function () {
// 获取当前option显示的状态
var nowShow = this.data.isShow;
if (nowShow) {
} else {
}
this.setData({
isShow: !nowShow,
});
},
//设置内容
selectItemAction: function (e) {
// 当前option的数据是引入组件的页面传过来的,所以这里获取数据只有通过this.properties
var nowData = this.properties.selectArray;
var index = e.target.dataset.index; // 当前点击的索引
var current_text = nowData[index].name; // 当前点击的内容
var current_type = nowData[index].type; // 当前点击的内容
this.setData({
isShow: false,
current_text: current_text,
});
// 内容更新后,需要把更新的数据传输出去
var nowDate = {
id: index,
name: current_text,
type: current_type,
};
// 这里的 getNowData 要和外部的 bind:getNowData ,名称一定要对应
this.triggerEvent("getNowData", nowDate);
},
},
});
//父组件传值
<v-select select-array='{{selectArray}}' current-text="{{current_text}}"></v-elect>
//子组件接收使用properties接收
properties: {
selectArray: {
type: Array,
}
}
//子组件给父组件传递值(通过方法传值)
// 这里的 getNowData 要和外部的 bind:getNowData ,名称一定要对应
this.triggerEvent('getNowData', nowDate);
//父组件
<v-select bind:getNowData='getCurrentTextAction'></v-elect>
文章参考: https://www.cnblogs.com/xiao-apple36/p/12867092.html https://www.jianshu.com/p/1b83e00738a9 https://blog.csdn.net/qq_35872379/article/details/87935688