10月29号笔记
今日所学:Hbuilder常用组件
Hbuilder常用组件:
先前我们在学习HTML的时候,采用“标签”来调用整个浏览器前端的基础组件,为了保证一个整体的稳定性,HBuilderX(后续称为HX)用了uni-app框架,进而使用uvue来做一个“灵魂构造”,实现一个“one for all”的高可移植性的编写,真的令人叹服。要是为了实现一个功能而专门另外学习一门语言或者熟悉一个集成环境,这个着实令人头疼,HX所做的一些东西是真的很值得敬佩的。话不多说,在uni-app下,为了实现组建的调用,就意味着需要学习不同组件的调度方法和使用,这是需要认识到的。
<view>:用于平替<div>标签,用于构造一个容器,以实现布局功能。
其属性中存在一个“按下更改样式”的属性,可以依靠重设属性来实现样式的控制。
其中的hover-stay-time为设定放松后多久回调到class常态。Hover-start-time为设定按下后多久进入到hover-class运行态。
有些时候会存在多重触发的问题,既子元素受到了触发,但是父元素由于和子元素的强绑定,也会随之触发,为了避免这样的跟随效应,既“冒泡效应”。但是有些时候我们只希望子元素发生变化而父元素不变化,可以采用hover-stop-propagation来处理,但是多终端下,不一定都支持,查阅文档后发现,hover-stop-propagation只支持微信小程序的配置。
<text>:用于平替<span>标签,用来存放文本内容。
可选文字:默认下不可选。
<scroll-view>:滚动视角,用于同一页面的数据扩展功能。
由于scroll-view会自动的将对应内容容纳到内部,所以如果需要将整个页面制作成这样的需要内容,则直接设置scrollview的高度、宽度为100%即可,当然,如果需要进一步对内容进行数据划分,就需要重新设定整个页面的安排内容了。
对于需要设定为x滑动或者是y滑动,可以直接设置scroll-x和scroll-y来设置对应的xy的滑动,但是我的x效果不好,没有出来,就先展示只有y坐标下滑动的效果。
如果需要设置横向放置,则直接将flex-direction设定为row即可(好像是默认设定为display:flex的)
<swiper>:轮播套件,用于展示一系列图片、文字等。
Swiper由多个的swiper-item来构成,这就意味着每个swiper中都需要容纳多个swiper-item来存储分项数据。为了实现不同的单个区域的样式不同,可使用css的伪类选择器来控制不同页面的背景颜色。既 swiper-item:nth-child(3n) 那里的设置。
显示指示点可以直接使用 indicator-dots="true" 将指示点设定为true即可。注释内容为swiper的常见属性。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ri-ji/76544.html