位置: IT常识 - 正文

【微信小程序】视图容器和基本内容组件(微信小程序在哪里打开)

编辑:rootadmin
【微信小程序】视图容器和基本内容组件

推荐整理分享【微信小程序】视图容器和基本内容组件(微信小程序在哪里打开),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序怎么制作自己的小程序,微信小程序开发一个多少钱,微信小程序开发公司,微信小程序开发,微信小程序开发公司,微信小程序店铺怎么开,微信小程序怎么制作自己的小程序,微信小程序怎么制作自己的小程序,内容如对您有帮助,希望把文章链接给更多的朋友!

开发者可以通过运用组件快速搭建出页面结构,上一章也有对组件进行介绍,那么本文牛牛就来带大家学习小程序的组件。 我们可以将组件理解为微信内嵌的标签,它在小程序承担的作用与HTML的标签一致,不过组件的功能更加多样、具体。 事不宜迟,让我们开冲!

文章目录一,视图容器类组件1.1 view1.2 srcoll-view1.3 swiper和swiper-item二,基本内容组件2.1 text2.2 rich-text一,视图容器类组件1.1 view

普通视图容器,在微信小程序中,view就相当于HTML中的div标签,属于块级元素

view由于其无意义性,经常用来做小程序大体框架的布局

栗子:

如下实现纵向布局 wxml文件

<view class="column"> <view class="view-1 box"></view> <view class="view-2 box"></view> <view class="view-3 box"></view></view>

wxss文件

.column{ margin: 0 auto; width: 100px;}.view-1{ background-color: lightblue;}.view-2{ background-color: lightcoral;}.view-3{ background-color: lightgreen;}.box{ width: 100px; height: 100px;}

view组件没有什么默认的样式,非常适合作为布局结构使用,如网格布局,flex布局等等。 效果:

1.2 srcoll-view相对比于view,scroll-view多了可滚动的功能,scroll-view被称为可滚动的视图区域一般用来实现小程序的列表滚动功能常用属性:

scroll-x,允许横向滚动scroll-y,允许纵向滚动bindscrolltoupper 滚动到顶部/左边触发bindscrolltolower 滚动到底部/右边触发【微信小程序】视图容器和基本内容组件(微信小程序在哪里打开)

bindscrolltoupper和bindscrolltolower一般配合事件绑定一起使用,事件就是渲染层与逻辑层的通信,用户在渲染层产生的行为,逻辑层对该行为进行相应。

栗子: wxml文件

<scroll-view class="scroll" scroll-y> <view class="box view-1"></view> <view class="box view-2"></view> <view class="box view-3"></view></scroll-view>

wxss文件

.scroll{ width: 100px; height: 120px;}.box{ width: 100px; height: 100px;}.view-1{ background-color: lightgreen;}.view-2{ background-color: lightpink;}.view-3{ background-color: lightskyblue;}

效果:

当然你可以将scroll-y属性改为scroll-x,实现横向滚动

1.3 swiper和swiper-itemswiper,滑块视图容器,可以设置滑动播放的元素,需要注意的是,里面只可放置swiper-item标签,否则会导致未定义的行为。swiper-item,只可放置于swiper,注意,其宽高自动设置为100%。一般用来设置轮播图常用属性:

indicator-dots 设置是否使用面板指示点,默认为falseindicator-color 面板指示点的颜色,默认值为rgba(0,0,0,.3)indicator-color 当前选中的指示点颜色,默认值为#000autoplay 是否自动切换图片,默认为falseinterval 自动切换的时间间隔,默认为5000mscircular 是否选择衔接滑动,==也就是当滑到最后一张图片,是否允许划动的下一张即回到第一张,默认值为false

轮播图栗子: wxml文件

<swiper class="container" indicator-dots="true" autoplay="true" circular="true" ><swiper-item class="box item-1"><view></view></swiper-item><swiper-item class="box item-2"><view></view></swiper-item><swiper-item class="box item-3"><view></view></swiper-item></swiper>

wxss文件

.container{ height: 200px;}.box{ height: 100%;}.item-1{ background-color: lightgreen;}.item-2{ background-color: lightpink;}.item-3{ background-color: lightgray;}

就这样,我们就实现了轮播图,相比于在网页用JS的复杂操作,这种低代码实现是不是很舒服,为了提高效率,低代码也将是未来的趋势

效果:

视图容器组件还有像可拖拽视图movable-area,弹窗视图page-container,感兴趣可以了解一下

二,基本内容组件2.1 text内容描述为承载文本,是一个文本组件,您可以将它看作是小程序的span标签,因为text也是行内元素。常用属性:

user-select ,文本是否可选,如可以进行复制,注意:该属性可使文本组件显示为inline-block2.2 rich-text内容描述为富文本,我们可以通过其中的nodes属性,把HTML字符串渲染成对应的UI结构 如下所示:<rich-text nodes="<h1 style='color: lightblue'>标题</h1>"></rich-text>

效果如下:

文章到这里就结束啦,下一篇的预告是讲解表单组件并做出一个小案例,如果觉得文章对您有用的话可以关注一下牛牛后续的更新呀,感谢您的支持!

债见~

本文链接地址:https://www.jiuchutong.com/zhishi/298838.html 转载请保留说明!

上一篇:axios请求中以params或body形式传递参数的区别(axios请求数据的数据类型)

下一篇:谷歌浏览器无法使用翻译功能的解决方案,谷歌浏览器无法翻译怎么办?谷歌浏览器右键翻译失效了?(谷歌浏览器无法安装)

  • 托收承付和委托收款的含义和相同之处
  • 个体户经营所得税率
  • 企业减免的税费账务处理
  • 往期附加税申报错误更正后怎么退税
  • 人力费可以计入劳务费吗
  • 前年购买的设备怎么入账
  • 土地补偿款收入要交什么税
  • 行政事业单位收据样本
  • 营改增之后账务怎么处理
  • 仓储货架工厂仓库货架
  • 借款存入银行会计分录
  • 当月发票入库核销怎么算
  • 销项负数发票如何作废
  • 办公费税前扣除标准2022最新
  • 股息率炒股
  • 高速公路通行费发票怎么开
  • 企业案例描述
  • 销售收入里面包括免税收入呢
  • 银行年费计入管理费用还是财务费用
  • 计划分配率怎么算
  • 苹果电脑删除win系统文件
  • 什么是盈余公积和资本公积
  • 房产税存在往期未申报信息怎么处理
  • 基本户里面的钱的用途
  • win10网络带宽
  • PHP:mb_substitute_character()的用法_mbstring函数
  • windows7部分的更新安装失败怎么办?
  • 如何在局域网内发布网页
  • win11自动更新卡在94%
  • PHP:pg_last_error()的用法_PostgreSQL函数
  • 抵债资产账务处理程序
  • vue数据处理在哪个阶段
  • mysql实现事务
  • 非正常损失会计利润调整
  • 坎塔布莱恩
  • 银行汇票属于银行存款吗
  • php技巧
  • zendframework3中文手册
  • 出差补助需要发工资吗
  • 滑模控制理论与应用研究pdf
  • vue render ref
  • 注意!PHP 7中不要做的10件事
  • javaweb:jquery中ajax的应用
  • 财务报表申报后怎么修改
  • 一般纳税人的账务处理分录
  • sql server 排名函数
  • 在资产减值准备中符合条件可以转回的有
  • 异常凭证一定要转出吗
  • 企业销售已使用的车辆
  • 错账更正方法有几种分别适用于什么情况
  • 税务稽查补缴上年所得税分录
  • 投资折价会计处理
  • 投资收益的会计科目
  • 连锁药店成本会计
  • 代发工资的手续流程
  • 哪些住宿费不属于差旅费
  • 企业自查补交增值税
  • 利润分配未分配利润怎么结转
  • 航天开票系统怎么导出已开票明细
  • 个人到税务局开普票要交多少税
  • mysql5.7版本的服务的名字是
  • mysql无法连接10055
  • gridview自定义排序
  • 老毛桃u盘启动制作工具如何把原来的win7改xp系统图文教程
  • 屏蔽系统
  • windows server 2008 r2离线激活
  • linux系统转换为win系统脚本
  • 系统维护的主要内容有哪些
  • 什么是selinux
  • linux用ssh登录不进去
  • Extjs4中Form的使用之本地hiddenfield
  • 每日一个linux命令
  • js闭包的使用
  • 怎么设置python前面序号
  • javascript中Date format(js日期格式化)方法小结
  • 湖北税务发票真伪查询网
  • 北京市国家税务局
  • 江苏国税电子税务局网上申报流程
  • 如何计算土地增值税税率
  • 天津市河东区税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设