微信小程序开发系列(三十五)·自定义组件的属性properties

本文主要是介绍微信小程序开发系列(三十五)·自定义组件的属性properties,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

微信小程序开发系列(三十四)·自定义组件的创建、注册以及使用(数据和方法事件的使用)_wx小程序组件开发-CSDN博客

目录

1.  组件的属性

2.  组件的使用

3.  细节描述


1.  组件的属性

        Properties是指组件的对外属性,主要用来接收组件使用者传递给组件内部的数据,和data一同用于组件的模板渲染。

        找到上一章节的如下位置:

        可以看到Properties所在的位置,由于这个组件实在首页使用的,因此我们需要找到首页位置。

2.  组件的使用

        找到index.wxml文件,编写如下代码,给custom-checkbox附加属性:


<!-- <button type="warn" bind:tap="getData">获取数据</button> --><button type="primary" bind:tap="delHandler">删除商品</button><view class="line"></view><!-- label 文本显示的内容 -->
<!-- position 控制文本显示的位置 -->
<custom-checkbox label="我已阅读并同意 用户协议 和 隐私协议" position="right" /><view class="line"></view><custom-checkbox label="匿名提交" position="left" />

        目前给组件内部创建了两个属性,这就需要到组件内部进行接收,找到Properties所在的位置编写如下代码进行接收:

  /*** 组件的属性列表:组件的对外属性,主要用来接收组件使用者传递给组件内部的属性以及数据*/properties: {//如果需要接受传递的属性,有两种方式:全写、简写//全写//label: String//简写label:{//type 组件使用者传递的数据类型//数据类型:String、Number、Boolean、Object、Array//也可以设置为null,表示不限制类型type: String,value: ''},position:{type: String,value: 'right'}},

        找到文件custom-checkbox.wxml,进行渲染接收到的信息:

    <view><text>{{ label }}</text></view>

        此时刚刚编写的就可以显示出来了: 

        对此时的布局不满意我们也可以对其样式进行更改,找到custom-checkbox.scss文件,编写代码:

.custom-checkbox-box{display: flex;align-self: center;
}

        使用  display: flex;可以使复选框和文本在同一行展示,使用  align-self: center;可以在垂直方向居中。

        为了调动复选框在左边还是在右边显示,可以根据类名.left和.right来分别设置不同的 flex 方向。我们可以先找到custom-checkbox.scss文件,创建.custom-checkbox-box.left和.custom-checkbox-box.right:

.custom-checkbox-box.left{flex-direction: row-reverse;
}.custom-checkbox-box.right{flex-direction: row;
}

        然后找到custom-checkbox.wxml文件,更改代码,使用三目运算符进行判断:

  <view class="custom-checkbox-box {{ position === 'right' ? 'right' : 'left' }}">

        文章开头,我们编写的代码:


<!-- <button type="warn" bind:tap="getData">获取数据</button> --><button type="primary" bind:tap="delHandler">删除商品</button><view class="line"></view><!-- label 文本显示的内容 -->
<!-- position 控制文本显示的位置 -->
<custom-checkbox label="我已阅读并同意 用户协议 和 隐私协议" position="right" /><view class="line"></view><custom-checkbox label="匿名提交" position="left" />

        对position进行判断:

3.  细节描述

        在这里程序基本完成,不过在运行玩以后通过“调试器”,我们可以看到复选框的右侧会有一些间隙,但是左侧没有:

        为了样式的好看,我们可以为复选框左侧添加一些样式,添加类名class="custom-checkbox":

    <checkbox class="custom-checkbox" checked="{{ isChecked }}" bind:tap="updateChecked"></checkbox>

        然后找到找到custom-checkbox.scss文件,编写:

.custom-checkbox{margin-left: 10rpx;
}

        这里若是我们想要获取复选框当前状态,可以找到custom-checkbox.js文件,编写如下代码:

      console.log(this.properties.label)

        我们也可以在组件内部进行修改:

        label:'在组件内部也可以修改 properties 中的数据'

        此时custom-checkbox.js文件完整代码:

// components/custom-checkbox/custom-checkbox.js
Component({/*** 组件的属性列表:组件的对外属性,主要用来接收组件使用者传递给组件内部的属性以及数据*/properties: {//如果需要接受传递的属性,有两种方式:全写、简写//全写//label: String//简写label:{//type 组件使用者传递的数据类型//数据类型:String、Number、Boolean、Object、Array//也可以设置为null,表示不限制类型type: String,value: ''},position:{type: String,value: 'right'}},/*** 组件的初始数据:用来定义当前组件内部所需要的数据*/data: {isChecked:false},/*** 组件的方法列表:在组件中所有的事件处理程序,都需要写到methods方法中*/methods: {// 更新复选框状态updateChecked(){// 通过取反isChecked的值来获取每次事件点击后的值// 例如初始时false,点击后为true,即对false取反this.setData({isChecked:!this.data.isChecked,label:'在组件内部也可以修改 properties 中的数据'})// console.log(this.properties.label)}}
})

        此时custom-checkbox.scss文件完整代码:

/* components/custom-checkbox/custom-checkbox.wxss */
.custom-checkbox-container{display: inline-block;
}.custom-checkbox-box{display: flex;align-self: center;
}.custom-checkbox-box.left{flex-direction: row-reverse;
}.custom-checkbox-box.right{flex-direction: row;
}.custom-checkbox{margin-left: 10rpx;
}

 微信小程序开发_时光の尘的博客-CSDN博客

这篇关于微信小程序开发系列(三十五)·自定义组件的属性properties的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1068853

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

W外链微信推广短连接怎么做?

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时,首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值,还要能够激起人们的分享欲望。对于许多企业和个人来说,尤其是那些缺乏创意和写作能力的人来说,这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大,不同用户的需求和兴趣各异。因此,制作推广链接时需要精准定位目标受众,以便更有效地吸引他们点击并分享链接

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

科研绘图系列:R语言扩展物种堆积图(Extended Stacked Barplot)

介绍 R语言的扩展物种堆积图是一种数据可视化工具,它不仅展示了物种的堆积结果,还整合了不同样本分组之间的差异性分析结果。这种图形表示方法能够直观地比较不同物种在各个分组中的显著性差异,为研究者提供了一种有效的数据解读方式。 加载R包 knitr::opts_chunk$set(warning = F, message = F)library(tidyverse)library(phyl

【生成模型系列(初级)】嵌入(Embedding)方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入(Embedding)方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节:嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”,它将文本中的单词或短语转换成计算机能够理解的数学形式,即向量。 正如翻译机将一种语言

滚雪球学Java(87):Java事务处理:JDBC的ACID属性与实战技巧!真有两下子!

咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE啦,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好习惯,别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,助你一臂之力,带你早日登顶🚀,欢迎大家关注&&收藏!持续更新中,up!up!up!! 环境说明:Windows 10

自定义类型:结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐? 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识,并举出了两个例子,我们再举出两个例子继续说明: struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s

flume系列之:查看flume系统日志、查看统计flume日志类型、查看flume日志

遍历指定目录下多个文件查找指定内容 服务器系统日志会记录flume相关日志 cat /var/log/messages |grep -i oom 查找系统日志中关于flume的指定日志 import osdef search_string_in_files(directory, search_string):count = 0