0
点赞
收藏
分享

微信扫一扫

微信小程序开发第二天之基础组件介绍

程序员知识圈 2022-04-21 阅读 58

组件介绍

View组件

Hove-class组件:适用于小程序超链接、按键等功能设置

使用方法:

Index.wxml文件下输入:

<view class="box" hover-class="boxHover">日行N次方</view>

Index.wxss文件下输入:

.box{ width: 100px; height: 100px;background:yellow;}

.boxHover{ background:yellowgreen;}

注:hover和hover-class组件类似但略有区别

hover-start-timehover-stay-time

使用方法:

hover-start-time="10"   //表示延时10ms

 这两个组件的功能为点击事件项它的触发(关闭)延时时间

hover-stop-propagation

该组件的功能是阻止冒泡,也就是防止在执行子事项的时候父事项的触发

<view 

class="box" 

hover-class="boxHover"

>



   <view class="item" 

   hover-class = "itemHover" 

   hover-stop-propagation >

   日行N次方

   </view>

</view>

字体居中设置: 

  align-items: center; /**子view垂直居中*/

  vertical-align: center; /**垂直居中*/

  justify-content: center; /**内容居中*/

Text组件:

navigator(超链接设置组件):

url:要跳转的地址 

跳转到日志

url="/pages/logs/logs"
Open-type:设置跳转模式
  Navigator:默认
  Redirect:跳转但不能返回首页,不能作用于tab栏
  Switchtab:作用于tab栏,并关闭其他所有页面,不可以携带参数
  Relaunch:作用于tab栏,并关闭其他所有页面,可以携带参数

Image:

路径操作补充:

../上一路径         ./当前路径      /进入路径(/放在最前面表示最顶层目录)

Src:图片路径,可以使本地计算机上的地址也可以是网络上的图片地址

Mode:图片在小程序中呈现的模式

Show-menu-by-longpress:编辑图片是否可以选中包含收藏、转发等功能

如有不对之处还请各位大佬指出,谢谢。

举报

相关推荐

Java基础复习第二天

RHCSA/Linux基础 第二天

CSS基础学习第二天

RHCSA第二天

CSS第二天

html第二天

出差第二天

0 条评论