位置: 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请求数据的数据类型)

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

  • 不能打动客户?学会这6个营销原理,就知道原因了……(不能打动客户的成语)

    不能打动客户?学会这6个营销原理,就知道原因了……(不能打动客户的成语)

  • 索尼的笔记本除尘(索尼的笔记本怎么样)(索尼笔记本除尘教程)

    索尼的笔记本除尘(索尼的笔记本怎么样)(索尼笔记本除尘教程)

  • 抖音名在哪里修改(抖音名称在哪修改)

    抖音名在哪里修改(抖音名称在哪修改)

  • 网上购票改签一次了还能退吗(网上购票改签一次退票扣多少钱)

    网上购票改签一次了还能退吗(网上购票改签一次退票扣多少钱)

  • 微信银行卡列表在哪里(开通微众银行卡)

    微信银行卡列表在哪里(开通微众银行卡)

  • ios14怎么删除软件(ios14.0怎么删除软件)

    ios14怎么删除软件(ios14.0怎么删除软件)

  • 快手闪退什么原因(快手闪退是怎么回事?)

    快手闪退什么原因(快手闪退是怎么回事?)

  • 苹果x能控制空调吗(苹果x能控制空调遥控吗)

    苹果x能控制空调吗(苹果x能控制空调遥控吗)

  • word查找替换快捷键是什么(word快速查找替换快捷键)

    word查找替换快捷键是什么(word快速查找替换快捷键)

  • potato注册一直显示连接(potato软件注册不了)

    potato注册一直显示连接(potato软件注册不了)

  • dell笔记本键盘输入没反应,怎么打开键盘(dell笔记本键盘锁住了怎么解锁)

    dell笔记本键盘输入没反应,怎么打开键盘(dell笔记本键盘锁住了怎么解锁)

  • 流量lpm是什么单位(流量lph单位)

    流量lpm是什么单位(流量lph单位)

  • iPhone11建议升级吗		(iPhone11建议升级16.1吗)

    iPhone11建议升级吗 (iPhone11建议升级16.1吗)

  • 图计算解决什么问题(图计算的应用)

    图计算解决什么问题(图计算的应用)

  • 华为扰码和手机串号是什么(什么是华为手机扰码)

    华为扰码和手机串号是什么(什么是华为手机扰码)

  • 对方关机微信能语音吗(对方关机微信能定位吗)

    对方关机微信能语音吗(对方关机微信能定位吗)

  • 两张移动卡能一起用吗(两张移动卡一张2g一张4g)

    两张移动卡能一起用吗(两张移动卡一张2g一张4g)

  • 怎么把百度视频保存到相册(怎么把百度视频里的音乐提取出来)

    怎么把百度视频保存到相册(怎么把百度视频里的音乐提取出来)

  • oppo手机动态锁屏壁纸怎么设置(oppo手机动态锁屏壁纸怎么关闭)

    oppo手机动态锁屏壁纸怎么设置(oppo手机动态锁屏壁纸怎么关闭)

  • 小米mix2s如何投屏(小米mix2s如何投屏电视)

    小米mix2s如何投屏(小米mix2s如何投屏电视)

  • iQOO Neo的分辨率(iqooneo5分辨率是多少)

    iQOO Neo的分辨率(iqooneo5分辨率是多少)

  • 华为智能识物功能在哪(智能识物软件下载华为)

    华为智能识物功能在哪(智能识物软件下载华为)

  • 小米手机怎么调节屏幕待机时间(小米手机怎么调字体大小?)

    小米手机怎么调节屏幕待机时间(小米手机怎么调字体大小?)

  • Linux用户alias文件配置方法(linux alias永久生效)

    Linux用户alias文件配置方法(linux alias永久生效)

  • 最高超频纪录的主板是什么(目前超频最高几ghz)

    最高超频纪录的主板是什么(目前超频最高几ghz)

  • 印花税的征税范围具体有哪些
  • 外贸企业申报退税流程
  • 特殊性税务处理弥补亏损限额
  • 偷税漏税逃税是什么意思
  • 免费样品需要交印花税吗
  • 房屋合同印花税税率属于个人交的吗
  • 没有社保可以缴费吗
  • 小微企业免税销售额和其他免税销售额
  • 工商年报本期社保怎么填
  • 民营企业的待遇
  • 长期股权投资转入持有待售资产
  • 无法收回的应收帐款
  • 高新研发费的账务处理怎么做?
  • 支付业务招待费的税费是进项还是销项
  • 集团内部资产划转需要交增值税吗
  • 小规模企业所得税税率多少
  • 学校需要开发票吗,学校的纳税人识别号是什么?
  • 单位为员工缴纳社保分录
  • 实收资本增加印花税缴纳时间
  • 补发工资如何缴纳工人所得税的法条
  • 社会团体非限定性净资产
  • 充值销售技巧和话术总结
  • 银行承兑 贷款
  • 其他应收款怎么冲平
  • 烟花爆竹入库须知
  • 初级会计实务的心得体会
  • 开办费计入长期待摊费用汇算清缴时怎么填写
  • 银行收付款凭证是什么
  • 贷款核销对个人的影响
  • 营业费用这个科目还在用吗
  • 国有土地租赁合同规定多少年
  • 资产变现率减资产负债率
  • 弥补以前年度亏损金额从哪里来的
  • 员工宿舍装宽带
  • Python 高性能 pdf
  • python怎么设置字符串宽度
  • 推特网页设置
  • phpcms官网打不开
  • 权益法转换为成本法
  • 进项税额年末账务处理
  • python.mat
  • python该怎么用
  • 停工损失会计分录怎么写
  • 债权人豁免债务的账务处理会计分录
  • 公司增资该怎么做账
  • 药店主营业务成本怎么算出来的
  • 未开票收入申报有税务风险吗
  • 哪类企业是可以避税的
  • 买赠销售账务处理
  • 职工薪酬纳税调整明细表税收金额
  • 一般餐饮业的固废是什么
  • 营业税差额征税范围
  • 资金账簿的计税依据
  • 投资性房地产如何进行初始计量
  • 小规模纳税人收入不能超过多少
  • 其他综合收益属于什么科目借贷
  • 工程施工科目设置
  • 买公司的钱计入什么科目
  • 购买商品发生的费用计入
  • 成本法与权益法的区别会计分录
  • 财务控制的方法和措施
  • mysql 5.7.11 winx64安装配置教程
  • Windows Server 2003报错无法定位程序输入点DecodePointer解决方法
  • sata驱动怎么装
  • win7重装系统之后怎么还原系统
  • gws.exe是啥
  • windows7无法继续安装
  • 两个js文件互相取变量
  • 问题的英语怎么读
  • 编写一个简单的shell
  • cocos2dx-js
  • 了不起的狐狸爸爸
  • win7支持快速启动吗
  • 特征提取技术
  • 关于echo的名字
  • 安卓开发常用代码
  • 广西地方税务局2018年1号公告
  • 税务蓝和电信蓝一样吗
  • 农村房屋改造问题向谁举报
  • 税务系统全面从严
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设