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

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

  • 游戏试玩:《辐射4》试玩个人心得体会(辐射游戏手游)

    游戏试玩:《辐射4》试玩个人心得体会(辐射游戏手游)

  • ipad9电池容量多少毫安(ipad9.7电池)

    ipad9电池容量多少毫安(ipad9.7电池)

  • 快手本地作品突然不见了的原因(快手里本地作品怎么没有了怎么找回)

    快手本地作品突然不见了的原因(快手里本地作品怎么没有了怎么找回)

  • 苹果xs不支持双卡吗(苹果xs不支持双卡怎么弄两个卡)

    苹果xs不支持双卡吗(苹果xs不支持双卡怎么弄两个卡)

  • 抖音怎么设置在线(抖音怎么设置在别的城市)

    抖音怎么设置在线(抖音怎么设置在别的城市)

  • 拼多多拼团什么意思(拼多多拼团什么时候结束)

    拼多多拼团什么意思(拼多多拼团什么时候结束)

  • 爱奇艺会员什么意思(爱奇艺会员什么银行信用卡积分兑换)

    爱奇艺会员什么意思(爱奇艺会员什么银行信用卡积分兑换)

  • ios降系统有什么坏处(苹果降系统会怎么样)

    ios降系统有什么坏处(苹果降系统会怎么样)

  • 白苹果怎么修复不丢数据(白苹果还有恢复原来的模样吗)

    白苹果怎么修复不丢数据(白苹果还有恢复原来的模样吗)

  • 小米6怎么设置模式(小米6怎么设置密码)

    小米6怎么设置模式(小米6怎么设置密码)

  • 快手复制链接怎么打开(快手复制链接怎么关闭)

    快手复制链接怎么打开(快手复制链接怎么关闭)

  • 为什么我的快手没有查找(为什么我的快手没有亲密关系)

    为什么我的快手没有查找(为什么我的快手没有亲密关系)

  • 微信投票失败5可解除吗(微信投票失败)

    微信投票失败5可解除吗(微信投票失败)

  • 华为手机如何查询激活时间(华为手机如何查出厂日期)

    华为手机如何查询激活时间(华为手机如何查出厂日期)

  • 小米cc9e如何隐藏应用(小米cc9应用隐身)

    小米cc9e如何隐藏应用(小米cc9应用隐身)

  • 多多旅行在哪里打开(多多旅行赚钱)

    多多旅行在哪里打开(多多旅行赚钱)

  • 唯品会如何删除历史订单(唯品会如何删除评价记录)

    唯品会如何删除历史订单(唯品会如何删除评价记录)

  • 极路由和普通路由有什么区别 极路由和普通路由区别详解(极路由好用吗)

    极路由和普通路由有什么区别 极路由和普通路由区别详解(极路由好用吗)

  • Linux中rsh远程shell命令的使用技巧解析(linux开启远程ssh)

    Linux中rsh远程shell命令的使用技巧解析(linux开启远程ssh)

  • 为什么WIN10本地连接经常掉线?(window10为什么没有本地用户和组)

    为什么WIN10本地连接经常掉线?(window10为什么没有本地用户和组)

  • 浅谈 JSON 对象和 FormData 相互转换,打通前端与后端的通信血脉(json与对象的区别)

    浅谈 JSON 对象和 FormData 相互转换,打通前端与后端的通信血脉(json与对象的区别)

  • 业务架构图(人工智能业务架构图)

    业务架构图(人工智能业务架构图)

  • 车船税是否每年都交
  • 劳务报酬个人所得税税率表
  • 债权投资借贷方
  • 经营活动现金流量公式
  • 加计抵减附加税怎么做账务处理
  • 定额发票可以用旧的营业执照发票章吗
  • 社保缴费回单怎么查
  • 车过户怎么处理
  • 应收账款无法收回会计分录
  • 以库存现金代垫怎么做账
  • 残保金是所有企业都交么
  • 自营方式建造固定资产增值税
  • 研发项目领原料加工成产品会计处理是怎样的?
  • etc开了充值发票还可以开消费发票么?
  • 卖股票为什么要留一手
  • 租赁业务增值税纳税义务发生时间
  • 地税三方协议是什么意思
  • 应征增值税不含税销售额(3%征收率)怎么算
  • 7月1号出台的政策
  • 暂估应付款借方
  • 离职补偿金的税率
  • 环保税计算方法和税率1.2
  • 超市预付卡过了还能退吗
  • 企业研发费用税前抵扣
  • 新版edge浏览器如何恢复设置
  • 应收账款周转率高说明
  • 对于目标文件系统文件过大无法删除
  • php防止再次刷新
  • php浮点数转为字符串
  • 网络连接错误是什么意思啊
  • PHP:mb_output_handler()的用法_mbstring函数
  • 原材料废料怎么做账
  • fg726p.exe
  • 发放应付职工薪酬是借方还是贷方
  • 在企业兼并时,被兼并企业价值评估的最适用假设是
  • 张家界天门山介绍简介
  • php zmq
  • 空调维修费进什么会计科目
  • php如何实现分页功能
  • 怎么用ai做vi
  • 或有资产什么时候要披露
  • 新法典离职
  • 运输发票税金如何入账
  • centos安装nmtui
  • 管理费用的核算内容主要包括哪些
  • 国外差旅费怎么入账
  • 企业取得投资收益要交税吗
  • 转让股权收入属于收入总额吗
  • 预付款项属于什么会计要素
  • 投资性房地产转换日的确定
  • 如果对装修费用有异议怎么办
  • 公司购买黄金送客户可以抵税吗
  • 生产经营年度汇算清缴
  • 企业盘盈盘亏的固定资产先要计入待处理财产损益
  • 故意销毁会计凭证、会计账簿罪
  • 编制合并报表时最关键的一步
  • 代理出口业务会计分录
  • 怎么用U盘装系统
  • 注册表 命令
  • 退休后归什么部门管
  • centos8指令
  • win8屏幕键盘快捷键
  • win8系统屏幕亮度调节
  • w10系统输入法
  • win10系统office2007每次打开都要配置
  • windows 7如何连接
  • linux常用命令详解
  • unity3d 多线程
  • bootstraptable教程
  • 微信小程序实现微信支付
  • vs2008安装教程
  • vue动态引入模块
  • 小葵花妈妈课堂开课了是什么药
  • android开发技术介绍
  • js扩展名是什么文件
  • jquery滚动条滚动事件
  • javascript面向对象编程指南第三版
  • 北京税务报到期限
  • 扬帆把舵怎么读
  • 企业营商环境包括哪些内容
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设