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

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

  • 网络营销推广 企业微博营销怎样定位?(网络营销推广方式包括)

    网络营销推广 企业微博营销怎样定位?(网络营销推广方式包括)

  • 创业+故事+网:做正确的事,不做容易的事(2)(创业故事小故事)

    创业+故事+网:做正确的事,不做容易的事(2)(创业故事小故事)

  • iphone6s怎么清除系统内存(iphone6s怎么清理内存)(苹果6怎么清除)

    iphone6s怎么清除系统内存(iphone6s怎么清理内存)(苹果6怎么清除)

  • 苹果13promax怎么退出id(苹果13promax怎么看是不是翻新机)

    苹果13promax怎么退出id(苹果13promax怎么看是不是翻新机)

  • 小米10和10pro手机壳通用吗(小米10和10pro手机膜一样吗)

    小米10和10pro手机壳通用吗(小米10和10pro手机膜一样吗)

  • 华为手机黑屏白字怎么调回来(华为手机黑屏白字怎么恢复白屏黑字了)

    华为手机黑屏白字怎么调回来(华为手机黑屏白字怎么恢复白屏黑字了)

  • 微信一秒钟语音怎么播放很长的音乐(微信一秒钟语音时间很长)

    微信一秒钟语音怎么播放很长的音乐(微信一秒钟语音时间很长)

  • 宽带和路由器一样吗(宽带和路由器一体的好还是分开好)

    宽带和路由器一样吗(宽带和路由器一体的好还是分开好)

  • ios13怎么下载不用密码(苹果13怎么下载不了app)

    ios13怎么下载不用密码(苹果13怎么下载不了app)

  • 百兆端口最大网速多少(百兆接口最大网速)

    百兆端口最大网速多少(百兆接口最大网速)

  • 支付宝怎么开启深色模式(支付宝怎么开启语音到账)

    支付宝怎么开启深色模式(支付宝怎么开启语音到账)

  • 小爱闹钟怎么连接wifi(小爱闹钟怎么连接无线)

    小爱闹钟怎么连接wifi(小爱闹钟怎么连接无线)

  • 数据库独立性最高的是(数据库 独立性)

    数据库独立性最高的是(数据库 独立性)

  • 华为nova5pro有没有nfc功能(华为nova5pro有没有OTG功能)

    华为nova5pro有没有nfc功能(华为nova5pro有没有OTG功能)

  • 手机上可以改银行卡密码吗(手机上可以改银行卡预留电话吗?)

    手机上可以改银行卡密码吗(手机上可以改银行卡预留电话吗?)

  • vivox20美颜怎么设置(vivo手机美颜功能设置)

    vivox20美颜怎么设置(vivo手机美颜功能设置)

  • i7 9700k和9700f有什么区别(i7 9700f和i7 9700k的区别)

    i7 9700k和9700f有什么区别(i7 9700f和i7 9700k的区别)

  • 荣耀9x是快充吗(华为荣耀9x是快充吗)

    荣耀9x是快充吗(华为荣耀9x是快充吗)

  • 抖音长视频怎么保存到本地(抖音长视频怎么下载到手机)

    抖音长视频怎么保存到本地(抖音长视频怎么下载到手机)

  • 手机只能打电话不能接电话原因(怎样设置手机只能打电话)

    手机只能打电话不能接电话原因(怎样设置手机只能打电话)

  • bsdtar命令  读取和写入磁带存档文件(btrfs 读取)

    bsdtar命令 读取和写入磁带存档文件(btrfs 读取)

  • command命令  调用并执行指定的命令(调出command命令窗口)

    command命令 调用并执行指定的命令(调出command命令窗口)

  • 企业所得税核定征收的条件
  • 收到工程服务费会计分录
  • 企业有利润要交什么税
  • 核定征收季度核定销售额
  • 年报过期了
  • 购买不良资产交印花税吗
  • 个体工商户的个税税率表
  • 收到税收返还会计分录
  • 公司承担的社保可以税前扣除吗
  • 土地增值税清算是什么意思
  • 未分配利润太多说明什么
  • 被列为经营异常名录有什么影响
  • 代办会议费是否允许差额纳税
  • 需不需要交企业所得税看报表的哪个地方?
  • 股权0元转让
  • 税款滞纳金如何免除
  • 打印出来的明细账怎么装订
  • 社保滞纳金能否超过本金
  • 年终奖扣税标准计算器
  • 母子公司之间支付的租赁费可以税前扣除么
  • 企业已交地税税金如何做账务处理?
  • 进项税转出如何申报纳税
  • 增值税普通发票和电子普通发票的区别
  • 用人单位发放工资时跨行手续费应由谁支付
  • win10应用商店下载微信
  • SSDP Discovery Service 是什么可以禁用吗
  • 进程rundll32
  • 减半征收所得税的有哪些
  • 根据完工进度确认成本
  • 股份有限公司变更法人的流程
  • 如何导入并使用数据库
  • 设备拆修痕迹影响大吗
  • 清明 哀思
  • bug的定位和跟踪
  • 办理银行承兑汇票保证金比例
  • javagui框架
  • 数据库参数错误
  • 实收资本报表怎么填
  • 增值税进项税额转出的情况有哪些
  • 工程结算属于哪类账户
  • 对公转账房租如何填写备注
  • 新收入准则确认收入的条件
  • 企业收到合同保险怎么办
  • 有哪些情况可以用别人的id
  • 企业盘亏的原因怎么写
  • 银行存款日记账填写样本图
  • 员工加班打车费报销
  • 网络服务费怎么入账
  • 延缓缴纳的企业所得税怎么做账
  • 公摊水电费计入什么科目
  • 免税如何做分录发票
  • 买车能不交税吗
  • 其他综合收益相反科目
  • 劳务费发票可以抵扣进项税吗
  • 个体工商户建行贷款条件
  • 设置会计账簿应当遵循的基本原则有
  • 怎样取消开机磁盘自动检查
  • xp系统网络服务在哪开启
  • Ubuntu Eclipse MyEclipse 添加GBK支持 不乱码
  • centos 安装chia
  • win7怎么运行itunes
  • win8任务栏设置在哪
  • win7系统怎样修复网络连接
  • unity3D游戏开发
  • 位图字体图片
  • 移动手机指令
  • node.js解析excel
  • 好用的shell终端
  • python面向对象特征
  • shell脚本显示进度条
  • 判断一个点在三角形内部
  • 基于python的聊天软件
  • android tabview
  • javascript基础编程
  • android怎么运行
  • 税务管理职责
  • 深圳罗湖区公安局长安慧君简历
  • 供热基础设施配套费
  • 神马电力几号发行
  • 江苏房产税如何计算公式
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设