- 综合排序
- 最热优先
- 最新优先
- 来自专栏CnPengDev
小程序 | 6-常用组件及组件共同属性
-- 6-loading 加载 --> <button size="mini" loading> loading 按钮</button> <button size="mini" loading="{{false View view <em>组件</em> ，即视图<em>组件</em>，是块级元素，默认独占一行，通常用作容器。类似前端的 div. view.wxml 如下: <! Image image <em>组件</em>可以自闭合，且有默认大小。是一个行内块元素。 ? 可以调用 wx 系统<em>组件</em>，从相册选择图片或者拍摄图片 ? 监听图片加载状态：bindload ? -- 5-show-menu-by-longpress 长按识别<em>小</em>程序码 --> <view>长按下图识别其中的<em>小</em>程序码</view> <image src="https://res.wx.qq.com 所有组件的共同属性 所有 wxml 标签（组件）都支持的属性称之为共同属性，具体有如下属性： ? ----
1.6K20发布于 2021-05-17 - 来自专栏极客起源
小程序开发实战（6）：基础组件（text、icon和progress）
小程序在有很多组件，其中基础组件用来显示一些静态的信息，也是各种组件中比较常用的。本文主要介绍text组件、icon组件和progress组件。 1. text组件 text是小程序中最简单的组件，用于显示文本。该组件支持转义符“\”。 系统内置图标组件（icon） icon组件用于显示系统内置的图标，该组件并不能自己指定图标文件。icon组件包含如下3个属性。 图2 从大到小显示success图标 下面的布局代码用于根据iconType数组显示不同的系统图标，这些图标都会使用默认的颜色，字号都是45。 默认值是0，该属性的取值范围是0~100 show-info：Boolean类型，默认值是false，如果该属性为true，会在进度条右侧显示百分比 stroke-width：Number类型，默认值是6，
94810发布于 2020-07-10 - 来自专栏陶然同学博客
【小程序】组件
小程序中组件的分类 2. 常用的视图容器类组件 3. view 组件的基本使用 4. scroll-view 组件的基本使用 5. swiper 和 swiper-item 组件的基本使用 6. swiper 组件的常用属性 7 小程序中组件的分类 小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。 官方把 小程序的组件分为了 9 大类，分别是： 视图容器 基础内容 表单组件 导航组件 媒体组件 map 地图组件 canvas 画布组件 开放能力 无障碍访问 2. ： 5. swiper 和 swiper-item 组件的基本使用 实现如图的轮播图效果： 6. swiper 组件的常用属性 7.
73320编辑于 2023-02-24 - 来自专栏全栈程序员必看
小程序子组件向父组件传值_小程序组件通信
父组件页面是carts.wxml 子页面是product.html 子组件wxml代码 <view class='cartAllSel' bindtap="bindSelectAll" > iconDel' wx:else type="circle" size="20"></icon> <text class='product-title'>全选</text> </view> 子组件 productList: carts, selectedAllStatus: allChecked, }) }, } 父页面 carts.wxml 需要在子组件处添加 {cartList}}" listType="{ {'cart'}}"></ProductList> 父页面 carts.js 注意checkNum方法是不能写在Methods中不然小程序会报找不到该组件
53430编辑于 2022-10-04 - 来自专栏跟Qt君学编程
Qml组件小知识
介绍组件构造，销毁，动态加载小知识。 对象/组件都具有类似C++的构造函数和析构函数 onCompleted对象构造完成自动执行； onDestruction对象销毁前自动执行。 Component.onCompleted: console.log("Completed") Component.onDestruction: console.log("Destruction") } 使用Loader加载组件 Component必须具有子空间才能实例化； onProgressChanged可以获取到组件的加载进度。 } } Loader { sourceComponent: component onProgressChanged: console.log(progress) } 动态加载Qml组件 , root, "error.txt"); 动态加载Qml组件
1.7K10发布于 2019-10-23 - 来自专栏柠檬先生
小程序 组件 Component
一.组件模板和样式 类似于页面，自定义组件拥有自己的 wxml 和模板 wxss 样式。 1.组件模板 组件的写法和页面的写法相同，组件模板与组件数据结合后生成的数节点， 将被插入到组件的引用位置。在组件模板中提供一个<slot> 节点，用于承载组件 引用时候提供的子节点。 组件对应wxss 文件的样式，只对组件wxml 内的节点生效。 （6）组件可以指定节点的默认样式 :host{color:yellow;} 5.外部样式 组件接收外部传入的样式类，可以在Component 中用externalClasses 定义若干个外部样式 类， { color:red; } 6.使用组件接收全局样式 默认情况下，自定义组件的样式只受到wxss 的影响 (1) app.wxss 中使用了标签名选择器，影响到页面和全部组件， (2) 在自定义的组件中激活了
1.3K40发布于 2019-05-25 - 来自专栏达达前端
小程序基础-组件
file 作者 | Jeskson 来源 | 达达前端小酒馆 ⽂本的<text>组件、表示图像的<image>组件、表示视图容器的 <view>组件，表示链接的<navigator>组件 组件的属性 公共属性是指⼩程序所有的组件都有的属性，⽐如id、class、style 轮播效果 ⼩程序有专⻔的轮播组件swiper <view class="home-top"> <view class= interval: 5000, duration: 1000, indicatorDots: true, indicatorColor: "#ffffff", activecolor:"#2971f6" , autoplay: true, audio组件 audio组件是⾳频组件 <audio src="{{musicinfo.src}}" poster="{{musicinfo.poster}}" name map或视频video组件之上 地图组件 <map id="myMap" style="width: 100%; height: 300px;" latitude="{{latitude}}
71320发布于 2019-11-29 - 来自专栏陶然同学博客
【小程序】组件通信
目录 自定义组件 - 父子组件之间的通信 1. 父子组件之间通信的 3 种方式 2. 属性绑定 3. 事件绑定 编辑 4. 获取组件实例 自定义组件 - behaviors 1. 导入并使用 behavior 5. behavior 中所有可用的节点 编辑 6. 同名字段的覆盖和组合规则* 总结 - 组件 自定义组件 - 父子组件之间的通信 1. 自定义组件 - behaviors 1. 什么是 behaviors behaviors 是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的 “mixins”。 6. (methods) 同名的生命周期函数 关于详细的覆盖和组合规则，大家可以参考微信小程序官方文档给出的说明： https://developers.weixin.qq.com/miniprogram/
2.7K10编辑于 2023-02-24 - 来自专栏狮乐园
高级 Angular 组件模式 (6)
当组件作者提前了解使用该toggle组件的父组件所需要的状态时，那么它将会正常的运作。但是如果父组件所需要的状态并不在我们的设想之内，我们该怎么办？ 目标 将toggle组件的状态直接提供给父组件，同时允许父组件提供相应的渲染视图(view)。 实现 <ng-template>组件可以完美地解决问题。 1. 父组件 从toggle组件中传入的状态是通过let关键字在父组件的<ng-template>标签上显示声明的。 toggle>组件的模板作用域中的变量名。 除了上面的解决方法，就是使用正文中所提及的模式了，这种模式将子组件视图的渲染逻辑倒置为子组件仅仅声明模板中所会使用的状态变量，对于这些变量和模板的注入工作，全权赋予父组件，因此会使子组件的复用性和可测试性大大提高
1.6K20发布于 2020-01-21 - 来自专栏狮乐园
高级 Angular 组件模式 (6)
当组件作者提前了解使用该toggle组件的父组件所需要的状态时，那么它将会正常的运作。但是如果父组件所需要的状态并不在我们的设想之内，我们该怎么办？ 目标 将toggle组件的状态直接提供给父组件，同时允许父组件提供相应的渲染视图(view)。 实现 <ng-template>组件可以完美地解决问题。 1. 父组件 从toggle组件中传入的状态是通过let关键字在父组件的<ng-template>标签上显示声明的。 toggle>组件的模板作用域中的变量名。 除了上面的解决方法，就是使用正文中所提及的模式了，这种模式将子组件视图的渲染逻辑倒置为子组件仅仅声明模板中所会使用的状态变量，对于这些变量和模板的注入工作，全权赋予父组件，因此会使子组件的复用性和可测试性大大提高
1.2K10发布于 2018-10-19 - 来自专栏狮乐园
高级 Vue 组件模式 (6)
06 通过 Directive 增强组件内容 目标 之前的五篇文章中，switch 组件一直是被视为内部组件存在的，细心的读者应该会发现，这个组件除了帮我们提供开关的交互以外，还会根据当前 toggle 我们期望能够显示地声明当前的元素是一个 toggler 职能的组件或者元素，这个组件或者元素，可以根据当前 toggle 组件的开关状态，动态地更新它本身的 aria-expanded 属性，以便针对无障碍访问提供适配 ，能否直接在指令中获取当前所绑定的组件实例呢？ 成果 你可以通过下面的链接来看看这个组件的实现代码以及演示： sandbox: 在线演示 github: part-6 总结 关于指令的概念，我自身还是在 angularjs 中第一次见到，当时其实不兴组件化开发这个概念 但仔细想想的话，web 开发流程中，并不是所有的场景都可以拿组件来抽象和描述的，比如说，你想提供一个类似高亮边框的公用功能，到底如何来按组件化的思想抽象它呢？这时候使用指令往往是一个很好的切入点。
75220发布于 2020-01-21 - 来自专栏学习/读书笔记
《Flutter》-- 6.高级组件
参阅书籍： 《Flutter跨平台开发入门与实践》-- 向治洪（著） 6. 高级组件 6.1 可滚动组件 对于列表和长布局的显示溢出问题，可以使用Flutter提供的可滚动组件来处理。 6.1.1 Scrollable组件 在Flutter中，一个可滚动的组件直接或间接包含一个Scrollable组件，它是可滚动组件的基础组件。 只需将Scrollbar组件作为可滚动组件的父组件使用即可。 ，组件树的子组件可以通过发送通知来与父组件进行通信，父组件则可以通过NotificationListener组件来监听自己关注的通知，这种跨组件的通信方式通常被称为事件冒泡。 Canvas canvas, Size size) { double wheelSize = min(size.width, size.height) / 2; double nbElem = 6;
12.6K20编辑于 2022-04-07 - 来自专栏踏浪的文章
Flutter lesson 6: Flutter组件之基础组件（二）
Row Row这个Widget其实就是一个布局组件，类似于前端中flex-direction: row;。作用就是可以使Row中的子元素在水平方向上面排列，可以用来做走马灯轮播等效果。 FadeInImage.assetNetwork( placeholder: 'images/logo.png', image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy 但是图片其实是很小的，因为设置了repeat（重复）属性，所以可以看到很多个小图片。如果要设置图片的宽高，可以设置了width和height后在设置fit:BoxFit.cover属性。 Text Text Widget用的是非常多的一个组件，要显示文字就需要用到这个组件。使用也是很简单的。
2.5K20发布于 2019-07-31 - 来自专栏友儿
微信小程序组件如何嵌套组件
组件嵌套组件其实和页面嵌套组件使用大差不差,也是分为注册定义和调用 组件所在目录位置 组件wxml <view> 自定义组件 </view> 组件panel 组件所在目录位置 /compontents /panel/panel 在json文件中注册定义组件tabBar { "component": true, "usingComponents": { "tabBar":"/compontents /tabBar/tabBar" } } 组件wxml 在panel中使用tabBar组件 <view> <tabBar/> </view>
1.5K20编辑于 2022-09-13 - 来自专栏夏天的前端笔记
小程序：组件篇（三）
1.源代码：listItem.vue 2.listitem.vue子组件这段代码，点击不同的图标它是会跳转到一个内容详情页，但是内容里面全是文字，我就把它放在一个data.js文件夹里面。
17410编辑于 2024-01-18 - 来自专栏极乐技术社区
小程序搜索组件wxSearch
初始化了wxSearchData的内容 initMindKeys 初始化mindKeys // mindKeys即为所要检索内容的集合 var mindKeys = ['weappdev.com','微信小程序开发 ','微信开发','微信小程序']; WxSearch.initMindKeys(mindKeys); 其他事件函数不再赘述，可能会有一些bug，可以根据情况自己进行修改。
1.9K80发布于 2018-02-05 - 来自专栏前端全栈开发者
小程序组件开发之时间轴组件及组件关系
前端项目目前涉及B端后台管理系统、C端小程序、Node服务端，其中业务重点在小程序端，我们只有微信小程序端，没有做其他小程序，也没有使用市面上流行的各种多端框架，我们使用原生开发方式，UI组件我们也选择了自研 所以，本文要说的是我们组件库最近添加的一个新组件，时间轴组件，也是笔者开发的，笔者由于在公司主要负责小程序端的开发，基于业务的需要贡献了开发了不少组件，那么多组件之所以讲这个组件，是因为其他大部分组件的开发都很普通 另外，为了写本文我把此组件做成了小程序代码片段，代码片段是一种可分享的小项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题等等，代码片段详细信息可以去官方文档看看。 后记 笔者小程序开发经验也不是很丰富，如有错误请指出，小程序的自定义组件涉及的东西比 Vue.js 多多了，比如模板和样式怎么处理、组件间通信、组件间关系、组件生命周期等都具有小程序特色。 原文链接：https://zhangbing.site/2019/09/28/小程序组件开发之时间轴组件及组件关系/。
1.6K20发布于 2019-12-27 - 来自专栏跟铭哥学音视频技术
小程序 组件采坑
小程序<mlvb-live-room>是使用了live-pusher、live-player标签和IM sdk组成的一个适用于连麦互动的小程序直播组件。 使用这个组件可以很简单的实现一个直播互动的小程序。虽然功能很好用，但是里面也有不少坑，今天我就来盘点一下。 官方文档介绍 第一个坑：没法试用连麦 这个问题是怎么表现的呢？ 假如你是第一次使用这个组件，想自己本地跑一下连麦效果，那么你大概率是会失败的，你发现你成功上麦之后，主播右下角会出现黑屏小画面，然后上麦的观众出现多次拉流失败的报错，之后上麦的这位观众就会推出直播间，如图下 我们其实可以去看看mlvb组件的源码，你会发现上面的那个纯音频推流的参数是用来控制live-pusher组件的enable-camera参数的。 image.png 顺着代码找，我们可以找到小主播的混流信息构建的位置。 image.png 目前，mlvb这个组件里面使用的混流接口还是v3.0的，所以我们需要去查看v3.0的接口。
2K20发布于 2020-09-10 - 来自专栏前端专栏
小程序转盘抽奖组件
项目地址 码云 效果图 image.png 使用方式 引入组件 .json { "usingComponents": { "turnplate-lottery": "/components /turnplate-lottery/index" } } 使用组件 .wxml <turnplate-lottery id="turnplate" list="{{prizeList}}"></turnplate-lottery
3.5K40编辑于 2022-06-09 - 来自专栏前端笔记ing
小程序组件页面通信
})父子组件通信 Component子组件向父组件传递值通过在 子组件中，写入事件，然后通过 triggerEvent 方法，指定事件名、detail对象和事件选项 ，来向父组件传递数据// 子组件var 父组件监听子组件触发的方法父组件通过在 子组件上 绑定子组件定义的事件名然后指定一个事件，来接收子组件传递过来的数据bind:子组件定义的事件名= “接收数据的方法”<detail-form bind 需要在子组件中 定义 props，<! title: String, content: String, },})<text> {{title}} </text><input model:value="{{content}}"/>子组件父组件直接操作子组件通过在 子组件标签上 绑定 class / ID ， 然后父组件可以通过 this.selectComponent ****方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法<detail-form
1.5K11编辑于 2023-11-13
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号