微信小程序学习-03-基本组件

view

• view
  • hover-class：点击样式
  • hover-stop-propagation:是否阻止本节点祖先节点出现点击态
  • hover-start-time
  • hover-stay-time

.hover_class{
	background-color:aqua;
	opacity:.5;
}

<view hover-class="hover_class">
	
</view>

text

• text
  • 文本标签，只能嵌套text
  • selectable
  • decode
  • space

image

• image
  • 默认宽320px,高240px
  • src
  • mode
    • scaleToFill(默认)
    • aspectFit
    • aspectFill
    • widthFill
    • top
    • buttom
    • center
    • left
    • right
    • …
  • lazy-load

<view>
	<image src="xxx/xxx"></image>
</view>

swiper

• swiper
  • 默认宽度100%,高度150px
  • autoplay
  • indicator-dots
  • indicator-color
  • indicator-active-color
  • circular
  • interval
• swiper-item
  • 默认100%

<swiper autoplay circular indicator-dots indicator-color="bule" indicator-active-color="red" interval="1000">
	<swiper-item><image mode="widthFix" src="xxx/xxx"></image></swiper-item>
	<swiper-item><image mode="widthFix" src="xxx/xxx"></image></swiper-item>
	<swiper-item><image mode="widthFix" src="xxx/xxx"></image></swiper-item>
</swiper>

swiper{
	width:100px;
	height:150px;
}
swiper-item{
}
image{
	width:100%
}

navigator

• navigator
  • 页面跳转
  • target
  • url
  • open-type
    • navigate
    • redirect
    • switchTab
    • reLaunch
    • navigateBack
    • exit

video

• video
  • src
  • controls
  • duration
  • autoplay
  • loop
  • muted

<video src="xx/xx">

</video>

自定义组件

• 组成
  • json
  • wxml
  • wxss
  • js

wxml

<view class="my_header">
	{{cData}}
	<view>
		<solt>
		</solt>
	</view>
</view>

js

Component({
	properties:{
		cData:{
			value:"组件的默认值"，
			type:String
		}
	}
})

json

{
	"component":true,
	"usingComponents":{}
}

wxss

.my_header{
	font-size:50px;
	background-color:yellow;
}

引用组件

其他页面文件

json

{
	"usingComponents":{
		"myHeader":"xx/xx/xx"
	}
}

<view>
	<myHeadrt>xxx<myHeader>
<view>