微信小程序-其他常用组件

简介: 该内容是关于微信小程序组件的介绍,主要包括`button`、`image`和`navigator`。`button`组件比HTML的按钮功能更丰富,通过`open-type`可调用微信功能,如客服、转发等。组件属性包括类型(如`primary`、`warn`)和尺寸(`size`)。`image`组件默认宽300px,高240px,支持设置属性来调整显示效果。`navigator`组件用于页面导航,类似HTML的a标签,常用于页面间的跳转。

1.button


按钮组件,功能比HTML中的button按钮丰富


通过open-type属性可以调用微信提供的各种功能(客服,转发,获取用户授权,获取用户信息等)


通用属性



例如:



<!--pages/list/list.wxml-->
<view>----------通过type指定按钮类型----------</view>
 
<button>默认按钮</button>
<!-- primary为主色调 -->
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
 
<view>---------size="mini"小尺寸按钮----------</view>
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
 
<view>----------镂空按钮------------</view>
<button size="mini" plain>默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>


2.image


图片组件,image组件默认宽度约300px,高度约240px


属性:



例如:



<!--pages/list/list.wxml-->
<!-- 1.空图片 -->
<image></image>
 
<!-- 2.使用src指向图片路径 -->
<image src="/image/xiao.jpg"></image>


/* pages/list/list.wxss */
image{
  /* 通过边框线证明image有默认的宽和高 */
  border: 1px solid red;
}


3.navigator


页面导航组件,类似于HTML中的a链接


目录
打赏
0
0
0
0
18
分享
相关文章
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
93 0
在线课堂+工具组件小程序uniapp移动端源码
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
139 1
微信小程序:轻松实现时间轴组件
|
5月前
|
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
906 1
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
146 0
微信小程序:自定义关注公众号组件样式
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
169 1
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
344 1
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
100 1
小程序入门之认识view和text组件
小程序入门之认识view和text组件
125 0
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
39 0
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
627 3

热门文章

最新文章