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

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

  • iwatch7怎么断开与手机连接(iwatch如何断开与手机连接)

    iwatch7怎么断开与手机连接(iwatch如何断开与手机连接)

  • 大众点评怎么排队取号(大众点评怎么排位)

    大众点评怎么排队取号(大众点评怎么排位)

  • 红米k30s至尊纪念版屏幕是多大尺寸的(红米k30s至尊纪念版是什么屏幕)

    红米k30s至尊纪念版屏幕是多大尺寸的(红米k30s至尊纪念版是什么屏幕)

  • word怎么设置纸型为16开(word怎么设置纸张横竖)

    word怎么设置纸型为16开(word怎么设置纸张横竖)

  • 手机APP闪退的原因(手机里app闪退)

    手机APP闪退的原因(手机里app闪退)

  • p30pro如何升级emui10(p30pro如何升级emui11)

    p30pro如何升级emui10(p30pro如何升级emui11)

  • 三星s20充电器多少w(三星s20+的充电器)

    三星s20充电器多少w(三星s20+的充电器)

  • 变频器频率上不去是什么原因(变频器频率上不到50)

    变频器频率上不去是什么原因(变频器频率上不到50)

  • 苹果手机一热就卡怎么回事(苹果手机一热就卡)

    苹果手机一热就卡怎么回事(苹果手机一热就卡)

  • 快手点赞马上取消对方知道吗(快手点赞马上取消会看到吗)

    快手点赞马上取消对方知道吗(快手点赞马上取消会看到吗)

  • 苹果8p手机声音越来越小怎么办(苹果8p手机声音很小怎么回事,开最大了)

    苹果8p手机声音越来越小怎么办(苹果8p手机声音很小怎么回事,开最大了)

  • comio是什么手机(comid是什么手机)

    comio是什么手机(comid是什么手机)

  • 九代i5有哪些型号(9代i5处于什么水平)

    九代i5有哪些型号(9代i5处于什么水平)

  • 手机有网为什么微信发不出去消息(手机有网为什么显示无法连接网络)

    手机有网为什么微信发不出去消息(手机有网为什么显示无法连接网络)

  • word怎么安装新字体(word安装教程)

    word怎么安装新字体(word安装教程)

  • 探探往左滑是什么意思(探探往左滑右滑怎么办)

    探探往左滑是什么意思(探探往左滑右滑怎么办)

  • 华为nova3长宽是多少厘米(华为nova3长宽高是多少厘米)

    华为nova3长宽是多少厘米(华为nova3长宽高是多少厘米)

  • 手机如何离线导航(手机如何离线导航连接)

    手机如何离线导航(手机如何离线导航连接)

  • 怎么把图片弄成闪照(怎么把图片弄成链接的形式)

    怎么把图片弄成闪照(怎么把图片弄成链接的形式)

  • 微信步数兑换上限是多少(微信步数换钱真的吗)

    微信步数兑换上限是多少(微信步数换钱真的吗)

  • vivo耳机不兼容怎么办(vivo耳机不能用怎么回事)

    vivo耳机不兼容怎么办(vivo耳机不能用怎么回事)

  • system boost是病毒吗(system病毒怎么清理)

    system boost是病毒吗(system病毒怎么清理)

  • 360智能摄像机安装(360智能摄像机安卓版)

    360智能摄像机安装(360智能摄像机安卓版)

  • airpods单耳设置(airpods 单耳设置)

    airpods单耳设置(airpods 单耳设置)

  • vivox27没有人脸识别吗(vivo手机没有人脸识别功能怎么办)

    vivox27没有人脸识别吗(vivo手机没有人脸识别功能怎么办)

  • apple store退款什么时候到账(apple store的退款几天到账)

    apple store退款什么时候到账(apple store的退款几天到账)

  • 应纳税暂时性差异是调增还是调减
  • 利润分配未分配利润借贷方表示什么
  • 资产总额是营业收入吗
  • 电子银行承兑重复背书
  • 什么时候确认应收股利
  • 自己打印raz
  • 应收账款转为其他应收款
  • 一般纳税人取得普票怎么做账
  • 营改增对房地产行业的影响
  • 职工教育经费税法
  • 住宿发票抵扣怎么做账
  • 公司借款给个人超过一年未还
  • 亏损企业净资产负债率
  • 一般纳税人农业增值税如何申报
  • 以库存现金代垫怎么做账
  • 去年支付的费用今年取得发票
  • 工程的进项税怎么处理
  • 税控盘证书密码一天可以输几次
  • 企业收到稳岗补贴的账务处理
  • 免税增值税发票怎么做账
  • 收到住房补贴怎么做账
  • 外包劳务费用如何计算
  • 递延收益的账务处理案例
  • 企业注销个税怎样更正申报呢
  • 农业自产自销如何认定
  • 收到工伤保险怎么做分录
  • 印花税是按开票金额还是收入
  • 银行提取备用金会计分录
  • Mac系统中使用QuickTime Player实现屏幕录像图文教程
  • mac如何打电话
  • 退回现金怎么写分录
  • win10声音设置面板在哪
  • 劳务报酬必须要和工资申报吗
  • 工会会员会费缴费证明怎么开
  • abstract php
  • 预计可变现净值影响账面价值吗
  • Jetson Xavier NX配置全过程——安装jtop和OpenCV4.5.3(二)
  • 进项税额的账务处理
  • 小型微利企业所得税优惠政策2023
  • 垃圾分类手工小模型
  • 处置固定资产的增值税怎么处理
  • 库存现金清零
  • 小程序和h5页面的区别
  • 财务支出表怎么做
  • 实发工资知道如何发放吗
  • 收到合同预付款怎么处理
  • 增值税退税怎么退
  • 如何确定可以结婚生子
  • mysql复制表语句
  • 工会其他支出包括哪些
  • 个税的代扣代缴
  • 收到分红的会计科目
  • 在工资模块中进行各工资类别间的汇总
  • 招待客户的住宿费发票可以报销吗
  • 车辆保险发票一般在哪开
  • 递延收益什么科目
  • 销售退货成本如何计算
  • 厂房出租租金收税吗
  • 作废的发票对方还能认证吗
  • 开工程款发票有什么规定?
  • 根据《增值税暂行条例》的规定,适用9
  • 当你感觉到你的win2000运行速度明显减慢
  • xp系统自带浏览器打不开网页
  • VirtualBox虚拟机免费
  • intel的me
  • windows 8 开发者预览版
  • mobile window
  • ssh登录报错
  • node.js javascript
  • android sql语句
  • socket怎么用
  • js瀑布流布局
  • 黑洞数6174视频
  • js 字符串转字节
  • 税收征收管理与实践
  • 手机申报税务不成功怎么办
  • 百旺税控盘口令认证失败pin锁定怎么办
  • 重庆市国家税务局电子税务局官网登录
  • 2021年社保又涨价了
  • 卖钢材交哪些税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设