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

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

  • 华为mate30pro锁屏时间位置在哪(华为mate30pro锁屏步数怎么关闭)

    华为mate30pro锁屏时间位置在哪(华为mate30pro锁屏步数怎么关闭)

  • 小米手机浏览器标识在哪里设置(小米手机浏览器禁止访问网站怎样取消)

    小米手机浏览器标识在哪里设置(小米手机浏览器禁止访问网站怎样取消)

  • 三星为什么叫安卓机皇(三星为什么称为安卓机皇)

    三星为什么叫安卓机皇(三星为什么称为安卓机皇)

  • 下载的输入法怎么启用(下载的输入法怎么用)

    下载的输入法怎么启用(下载的输入法怎么用)

  • fn+esc键是什么意思(fn和esc在一个键)

    fn+esc键是什么意思(fn和esc在一个键)

  • 淘宝上买完东西店铺不存在为什么(淘宝网上购物)

    淘宝上买完东西店铺不存在为什么(淘宝网上购物)

  • 荣耀手机查找定位(荣耀手机查找定位网站)

    荣耀手机查找定位(荣耀手机查找定位网站)

  • 拼多多能收藏店铺吗(拼多多收藏店铺赚钱)

    拼多多能收藏店铺吗(拼多多收藏店铺赚钱)

  • wps怎么统一改数字字体(wps怎么批量修改数字格式)

    wps怎么统一改数字字体(wps怎么批量修改数字格式)

  • 不是好友能隐身访问吗(不是好友隐身头像能看到吗)

    不是好友能隐身访问吗(不是好友隐身头像能看到吗)

  • 剪映两个视频怎么合成一个(剪映两个视频怎么一上一下)

    剪映两个视频怎么合成一个(剪映两个视频怎么一上一下)

  • 手机dc调光有什么用(手机什么叫dc调光)

    手机dc调光有什么用(手机什么叫dc调光)

  • iphone7的耳机孔在哪(苹果7手机耳机插孔)

    iphone7的耳机孔在哪(苹果7手机耳机插孔)

  • 微信群里发的信息别人看不到(微信群里发的信息群主可以删除吗)

    微信群里发的信息别人看不到(微信群里发的信息群主可以删除吗)

  • 火山创作原声怎么弄(火山小视频创作的原声视频教程)

    火山创作原声怎么弄(火山小视频创作的原声视频教程)

  • 小米夜光屏怎么打开(小米夜光屏怎么开启)

    小米夜光屏怎么打开(小米夜光屏怎么开启)

  • 荣耀note10能不能开空调(荣耀note10能不能插内存卡)

    荣耀note10能不能开空调(荣耀note10能不能插内存卡)

  • 三星手机怎样设置来电转接(三星手机怎样设置自动开关机)

    三星手机怎样设置来电转接(三星手机怎样设置自动开关机)

  • 微信的花呗在哪里(微信的花呗在哪里找到)

    微信的花呗在哪里(微信的花呗在哪里找到)

  • 抖音取消关注能找回吗(抖音取消关注能看到吗)

    抖音取消关注能找回吗(抖音取消关注能看到吗)

  • 安卓迅雷下载的文件在哪个文件夹(安卓迅雷下载的文件怎么看)

    安卓迅雷下载的文件在哪个文件夹(安卓迅雷下载的文件怎么看)

  • 若依(ruoyi)框架:如何实现灵活自定义路由配置(若依框架是什么框架)

    若依(ruoyi)框架:如何实现灵活自定义路由配置(若依框架是什么框架)

  • 股权转让中土地房产占比较大时怎么交税
  • 什么叫差额征税呢
  • 个人免征税额
  • 一般纳税人简易征收最新政策2023
  • 补缴以前年度附加税
  • 增值税有留底怎么减少留底
  • 购销合同赔偿比例一般多少
  • 房屋租赁费如何计提
  • 应交税费科目核算
  • 销项税额计算公式13%
  • 买赠销售方式的税务筹划
  • 企业借款不能超过资金多少
  • 汽车修理厂如何做账
  • 国税和地税分别占多少
  • 维修费增值税怎么开
  • 企业员工用自己手机发送工作
  • 如何判断境内企业所得税
  • 高新技术企业认定管理办法
  • 小微企业 2021
  • 华为手机蓝牙传送照片到苹果手机
  • 新版edge浏览器历史记录
  • win7系统内存不足怎么解决
  • word字体平滑
  • swupdtmr.exe - swupdtmr进程是什么意思 什么作用
  • 银行存款日记账怎么记账
  • 工程合同主要看什么
  • 增值税出口退税为什么不属于政府补助
  • php mb_convert_encoding
  • 从对公账户取现金有什么影响
  • 会计分录编制的步骤
  • 仓储服务和不动产租赁
  • 什么是技术服务工程师
  • php延迟静态绑定
  • php access
  • 退休返聘人员算临时工吗
  • 稳岗补贴怎么申请步骤
  • 所得税的季末从哪里算
  • 应收账款抵借的例题
  • 非财政补助结转和非财政补助结余的区别
  • 损益类所得税费用
  • ps抠图怎样
  • 大气污染物排放2020标准
  • mongodb mongoose
  • mongodb起源
  • 销售折扣购物卡对公司财务的好处
  • 营业成本包含哪些项目
  • 金税三期个税卸载流程
  • 利息保障倍数多少算正常
  • 最新版的电子发票没有章
  • 影视公司临时演员怎么办
  • 手机开个人发票怎么开
  • 公司资产业务
  • 工程未竣工预付款怎么办
  • 广告公司没有广告合法吗
  • 税务开票系统如何设置不用重复登录
  • 事业单位收到钱怎么记账
  • 公司固定资产如何核算
  • 如何利用公式计算
  • sql语句中单引号怎么打
  • mysql 内存模型
  • sql %和_
  • 数据库中经常用的函数
  • server2008 无法启动
  • 老毛桃2013 U盘启动盘和重装系统图文教程
  • sesvc.exe是什么
  • 电脑重新安装windows后还用激活吗
  • 不用第三方软件获取鼠标坐标
  • Win10 TH2正式版偷偷恢复/篡改成对应的预装应用
  • 如何查看激活日期苹果
  • red hat linux安装
  • 什么是馥芮白
  • ie浏览器怎么设置打开网页在同一个窗口
  • unity游戏项目开发教程
  • 用python发邮件
  • 两个Collider遮挡的解决办法
  • jquery如何实现轮播图
  • Python 常用代码库
  • android的中文
  • 矿产资源税的计税依据
  • 黑龙江省国税局举报电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设