阿里云
发表主题 回复主题
  • 870阅读
  • 0回复

[交流乐园]View组件

级别: 新人
发帖
2
云币
5
] {0OPU  
[size=font-size:14.0pt,14.0pt][font=&quot]一、使用方法[size=font-size:14.0pt,14.0pt][font=&quot]
[size=font-size:10.5pt,10.5pt][font=&quot]       view[size=font-size:10.5pt,10.5pt][font=&quot]组件是最常用的,也是最简单的视图容器。它是一个块级容器组件,它没有特殊的功能,主要用于布局展示,是布局中最基本的[size=font-size: 10.5pt,10.5pt][font=&quot]UI[size=font-size: 10.5pt,10.5pt]组件。几乎所有复杂的布局都可以通过嵌套[size=font-size: 10.5pt,10.5pt][font=&quot]view[size=font-size: 10.5pt,10.5pt]来实现。[size=font-size: 10.5pt,10.5pt][font=&quot]
[size=font-size: 10.5pt,10.5pt][font=&quot]       view[size=font-size: 10.5pt,10.5pt]除了公共属性之外,还有以下几个私有属性[size=font-size: 10.5pt,10.5pt][font=&quot]
[size=font-size: 10.5pt,10.5pt]属性名[size=font-size: 10.5pt,10.5pt][font=&quot]
[size=font-size: 10.5pt,10.5pt]类型[size=font-size: 10.5pt,10.5pt][font=&quot]
[size=font-size: 10.5pt,10.5pt]默认值[size=font-size: 10.5pt,10.5pt][font=&quot]
[size=font-size: 10.5pt,10.5pt]说明[size=font-size: 10.5pt,10.5pt][font=&quot]
[size=font-size: 10.5pt,10.5pt][font=&quot]hover-class
[size=font-size: 10.5pt,10.5pt][font=&quot]String
[size=font-size: 10.5pt,10.5pt][font=&quot]none
[size=font-size: 10.5pt,10.5pt]指定按下去的样式类[size=font-size: 10.5pt,10.5pt][font=&quot],[size=font-size: 10.5pt,10.5pt]默认值没有点击效果[size=font-size: 10.5pt,10.5pt][font=&quot]
[size=font-size: 10.5pt,10.5pt][font=&quot]hover-stop-propagation
[size=font-size: 10.5pt,10.5pt][font=&quot]Boolean
[size=font-size: 10.5pt,10.5pt][font=&quot]false
[size=font-size: 10.5pt,10.5pt]指定是否阻止本几点的祖先节点出现点击态[size=font-size: 10.5pt,10.5pt][font=&quot]
[size=font-size: 10.5pt,10.5pt][font=&quot]hover-start-time
[size=font-size: 10.5pt,10.5pt][font=&quot]Number
[size=font-size: 10.5pt,10.5pt][font=&quot]50
[size=font-size: 10.5pt,10.5pt]按住多久出现点击态[size=font-size: 10.5pt,10.5pt][font=&quot],[size=font-size: 10.5pt,10.5pt]单位毫秒[size=font-size: 10.5pt,10.5pt][font=&quot]
[size=font-size: 10.5pt,10.5pt][font=&quot]hover-stay-time
[size=font-size: 10.5pt,10.5pt][font=&quot]Number
[size=font-size: 10.5pt,10.5pt][font=&quot]400
[size=font-size: 10.5pt,10.5pt]手指松开后保持点击的状态[size=font-size: 10.5pt,10.5pt][font=&quot],[size=font-size: 10.5pt,10.5pt]单位毫秒[size=font-size: 10.5pt,10.5pt][font=&quot]
[size=font-size:10.5pt,10.5pt][font=&quot]       [size=font-size:10.5pt,10.5pt][font=&quot]其中[size=font-size: 10.5pt,10.5pt][font=&quot]hover-stop-propagation[size=font-size: 10.5pt,10.5pt]属性并不是说完全阻止了祖先节点的被点击能力,它只是代表点击当前[size=font-size: 10.5pt,10.5pt][font=&quot]view[size=font-size: 10.5pt,10.5pt]的时候,它的祖先节点不会产生点击效果[size=font-size: 10.5pt,10.5pt][font=&quot]
[size=font-size: 14pt,14pt]二、案例[size=font-size: 14pt,14pt][font=&quot]
[size=font-size: 10.5pt,10.5pt][font=&quot]      [size=font-size: 10.5pt,10.5pt]下面的案例演示了水平和垂直布局的两种嵌套[size=font-size: 10.5pt,10.5pt][font=&quot]view[size=font-size: 10.5pt,10.5pt],每一个子[size=font-size: 10.5pt,10.5pt][font=&quot]view[size=font-size: 10.5pt,10.5pt]都有己的颜色以及点击效果。[size=font-size: 10.5pt,10.5pt][font=&quot]
EYn9l n_]u  
[font=&quot]      1[font=&quot]、wxml[table=100%,#f2f2f2,,0][tr][td=1,1,100%]
[size=font-size:9.0pt,9.0pt]<[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]"container">[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]<!--[size=font-size:9.0pt,9.0pt][font=&quot]水平布局,点[size=font-size:9.0pt,9.0pt][font=&quot]击[size=font-size:9.0pt,9.0pt][font=&quot]之后背景色改[size=font-size:9.0pt,9.0pt][font=&quot]变[size=font-size:9.0pt,9.0pt]-->[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]<[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view-container1'[size=font-size:9.0pt,9.0pt]hover-class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view-hover'>[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]<!--[size=font-size:9.0pt,9.0pt][font=&quot]点[size=font-size:9.0pt,9.0pt][font=&quot]击[size=font-size:9.0pt,9.0pt]view1[size=font-size:9.0pt,9.0pt][font=&quot]的[size=font-size:9.0pt,9.0pt][font=&quot]时[size=font-size:9.0pt,9.0pt][font=&quot]候,它的祖先[size=font-size:9.0pt,9.0pt][font=&quot]节[size=font-size:9.0pt,9.0pt][font=&quot]点不会体[size=font-size:9.0pt,9.0pt][font=&quot]现[size=font-size:9.0pt,9.0pt][font=&quot]出点[size=font-size:9.0pt,9.0pt][font=&quot]击[size=font-size:9.0pt,9.0pt][font=&quot]状[size=font-size:9.0pt,9.0pt][font=&quot]态[size=font-size:9.0pt,9.0pt]-->[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]<[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view1'[size=font-size:9.0pt,9.0pt]hover-class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view-hover'[size=font-size:9.0pt,9.0pt]hover-stop-propagation[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'{{true}}'>[size=font-size: 9pt,9pt]view1[size=font-size:9.0pt,9.0pt]</[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]>[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]<[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view2'[size=font-size:9.0pt,9.0pt]hover-class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view-hover'[size=font-size:9.0pt,9.0pt]hover-stop-propagation[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'{{false}}'>[size=font-size: 9pt,9pt]view2[size=font-size:9.0pt,9.0pt]</[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]>[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]<[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view3'[size=font-size:9.0pt,9.0pt]hover-class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view-hover'[size=font-size:9.0pt,9.0pt]hover-stop-propagation[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'{{false}}'>[size=font-size: 9pt,9pt]view3[size=font-size:9.0pt,9.0pt]</[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]>[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]</[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]>[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]<[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view-container2'[size=font-size:9.0pt,9.0pt]hover-class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view-hover'>[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]<[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view4'[size=font-size:9.0pt,9.0pt]hover-class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view-hover'>[size=font-size: 9pt,9pt]view4[size=font-size:9.0pt,9.0pt]</[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]>[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]<[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view5'[size=font-size:9.0pt,9.0pt]hover-class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view-hover'>[size=font-size: 9pt,9pt]view5[size=font-size:9.0pt,9.0pt]</[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]>[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]<[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view6'[size=font-size:9.0pt,9.0pt]hover-class[size=font-size: 9pt,9pt]=[size=font-size:9.0pt,9.0pt]'view-hover'>[size=font-size: 9pt,9pt]view6[size=font-size:9.0pt,9.0pt]</[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]>[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]</[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]>[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]</[size=font-size:9.0pt,9.0pt]view[size=font-size:9.0pt,9.0pt]>[size=font-size: 9pt,9pt]
[/td][/tr][/table] f>Tn#OW  
[size=font-size:9.0pt,9.0pt] &F'n >QT9q  
[size=font-size:9.0pt,9.0pt]         2wxss[table=100%,#e7e6e6,,1][tr][td=1,1,568]
[size=font-size:9.0pt,9.0pt]/**index.wxss**/[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]/*[size=font-size:9.0pt,9.0pt][font=&quot]弹性盒子布局,垂直[size=font-size:9.0pt,9.0pt]*/[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt].container[size=font-size: 9pt,9pt] {
[size=font-size:9.0pt,9.0pt]display:[size=font-size:9.0pt,9.0pt]flex[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]flex-direction:[size=font-size:9.0pt,9.0pt]column[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]align-items:[size=font-size:9.0pt,9.0pt]left[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]margin:[size=font-size:9.0pt,9.0pt]20[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size: 9pt,9pt]}
[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]/*[size=font-size:9.0pt,9.0pt][font=&quot]第一个子容器,水平[size=font-size:9.0pt,9.0pt][font=&quot]弹[size=font-size:9.0pt,9.0pt][font=&quot]性,[size=font-size:9.0pt,9.0pt][font=&quot]应该[size=font-size:9.0pt,9.0pt][font=&quot]制定高度[size=font-size:9.0pt,9.0pt]*/[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt].view-container1[size=font-size: 9pt,9pt]{
[size=font-size:9.0pt,9.0pt]display:[size=font-size:9.0pt,9.0pt]flex[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]flex-direction:[size=font-size:9.0pt,9.0pt]row[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]height:[size=font-size:9.0pt,9.0pt]200[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]border:[size=font-size:9.0pt,9.0pt]2[size=font-size:9.0pt,9.0pt]rpxsolid[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]border-radius:[size=font-size:9.0pt,9.0pt]10[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]margin-bottom:[size=font-size:9.0pt,9.0pt]30[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]align-items:[size=font-size:9.0pt,9.0pt]center[size=font-size: 9pt,9pt];
[size=font-size: 9pt,9pt]}
[size=font-size:9.0pt,9.0pt].view1[size=font-size: 9pt,9pt]{
[size=font-size:9.0pt,9.0pt]width:[size=font-size:9.0pt,9.0pt]200[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]height:[size=font-size:9.0pt,9.0pt]100[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]background:[size=font-size:9.0pt,9.0pt]#ff0000[size=font-size: 9pt,9pt];
[size=font-size: 9pt,9pt]}
[size=font-size:9.0pt,9.0pt].view2[size=font-size: 9pt,9pt]{
[size=font-size:9.0pt,9.0pt]width:[size=font-size:9.0pt,9.0pt]200[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]height:[size=font-size:9.0pt,9.0pt]100[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]background:[size=font-size:9.0pt,9.0pt]#00ff00[size=font-size: 9pt,9pt];
[size=font-size: 9pt,9pt]}
[size=font-size:9.0pt,9.0pt].view3[size=font-size: 9pt,9pt]{
[size=font-size:9.0pt,9.0pt]width:[size=font-size:9.0pt,9.0pt]200[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]height:[size=font-size:9.0pt,9.0pt]100[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]background:[size=font-size:9.0pt,9.0pt]#0000ff[size=font-size: 9pt,9pt];
[size=font-size: 9pt,9pt]}
[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt]/*[size=font-size:9.0pt,9.0pt][font=&quot]第二个子容器,垂直[size=font-size:9.0pt,9.0pt][font=&quot]弹[size=font-size:9.0pt,9.0pt][font=&quot]性,[size=font-size:9.0pt,9.0pt][font=&quot]应该[size=font-size:9.0pt,9.0pt][font=&quot]制定[size=font-size:9.0pt,9.0pt][font=&quot]宽[size=font-size:9.0pt,9.0pt][font=&quot]度[size=font-size:9.0pt,9.0pt]*/[size=font-size: 9pt,9pt]
[size=font-size:9.0pt,9.0pt].view-container2[size=font-size: 9pt,9pt]{
[size=font-size:9.0pt,9.0pt]display:[size=font-size:9.0pt,9.0pt]flex[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]flex-direction:[size=font-size:9.0pt,9.0pt]column[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]width:[size=font-size:9.0pt,9.0pt]500[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]align-items:[size=font-size:9.0pt,9.0pt]center[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]border:[size=font-size:9.0pt,9.0pt]2[size=font-size:9.0pt,9.0pt]rpxsolid[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]border-radius:[size=font-size:9.0pt,9.0pt]15[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size: 9pt,9pt]}
[size=font-size:9.0pt,9.0pt].view4[size=font-size: 9pt,9pt]{
[size=font-size:9.0pt,9.0pt]width:[size=font-size:9.0pt,9.0pt]200[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]height:[size=font-size:9.0pt,9.0pt]100[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]background:[size=font-size:9.0pt,9.0pt]#ff0000[size=font-size: 9pt,9pt];
[size=font-size: 9pt,9pt]}
[size=font-size:9.0pt,9.0pt].view5[size=font-size: 9pt,9pt]{
[size=font-size:9.0pt,9.0pt]width:[size=font-size:9.0pt,9.0pt]200[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]height:[size=font-size:9.0pt,9.0pt]100[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]background:[size=font-size:9.0pt,9.0pt]#00ff00[size=font-size: 9pt,9pt];
[size=font-size: 9pt,9pt]}
[size=font-size:9.0pt,9.0pt].view6[size=font-size: 9pt,9pt]{
[size=font-size:9.0pt,9.0pt]width:[size=font-size:9.0pt,9.0pt]200[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]height:[size=font-size:9.0pt,9.0pt]100[size=font-size:9.0pt,9.0pt]rpx[size=font-size: 9pt,9pt];
[size=font-size:9.0pt,9.0pt]background:[size=font-size:9.0pt,9.0pt]#0000ff[size=font-size: 9pt,9pt];
[size=font-size: 9pt,9pt]}
[size=font-size:9.0pt,9.0pt].view-hover[size=font-size: 9pt,9pt]{
[size=font-size:9.0pt,9.0pt]background:[size=font-size:9.0pt,9.0pt]#e2e2e2[size=font-size: 9pt,9pt];
[size=font-size: 9pt,9pt]}
[/td][/tr][/table] _~ 2o  
SI=7$8T5=5  
      3、js[table=100%,#e7e6e6,,1][tr][td=1,1,568]
[size=font-size:10.5pt,10.5pt]/*author:  [size=font-size:10.5pt,10.5pt][font=&quot]魏杰工作室[size=font-size: 10.5pt,10.5pt]
[size=font-size:10.5pt,10.5pt] * QQ:     2162408571[size=font-size: 10.5pt,10.5pt]
[size=font-size:10.5pt,10.5pt] * [size=font-size:10.5pt,10.5pt][font=&quot]群[size=font-size:10.5pt,10.5pt]:     792247623    791749272[size=font-size: 10.5pt,10.5pt]
[size=font-size:10.5pt,10.5pt] */[size=font-size: 10.5pt,10.5pt]
[size=font-size: 9pt,9pt]
[size=font-size: 9pt,9pt]Page({
[size=font-size: 9pt,9pt]    data: {
[size=font-size: 9pt,9pt]
[size=font-size: 9pt,9pt]    },
[size=font-size: 9pt,9pt]
[size=font-size: 9pt,9pt]onLoad:[size=font-size:9.0pt,9.0pt]function[size=font-size: 9pt,9pt]() {
[size=font-size: 9pt,9pt]
[size=font-size: 9pt,9pt]    }
[size=font-size: 9pt,9pt]
[size=font-size: 9pt,9pt]})
[/td][/tr][/table] Ac}5,  
Odw9]`,T  
[size=font-size: 14pt,14pt]三、效果 xlc2,L;i  
       "DX 2Mu=  
\GK]6VW  
Yq{R*HO  
i nk !>Z  
Y+0GJuBf  
D23 c/8K  
[size=font-size:9.0pt,9.0pt]
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
如果您提交过一次失败了,可以用”恢复数据”来恢复帖子内容
 
验证问题: 7 + 75 = ?
上一个 下一个