一.组件概述与属性
概述：
框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。
什么是组件
1.组件是视图层的基本组成单元。
2.组件是自带一些功能与微信风格的样式。
3.一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。
如：<view/>组件就可以如下书写
<view class"container"></view>
所有组件与属性都是小学，以连接符-链接
属性：
1.属性类型
2.共同属性
3.特殊属性
image.png
image.png
微信小程序 学习笔记 组件详解
image.png
二.各种组件
1.组件之view
view是视图容器，所谓容器就是页面上用来划分区域的块，view就是用来将页面划分块的，使用view，我们可以讲一个页面按照我们得需要划分多个区块，在不同的区块中存放我们响应的内容，从而展现出吩咐付的界面
1.组件之scrll-view
scrll-view是具有view相同的功能，但是它是可以滚动的，使用竖向滚动时，需要给<scroll-view/>一个固定的高度，通过wxss设置height。
image.png
image.png
image.png
image.png
wxml文件
<view class="section">
<view class="section__title">vertical scroll</view>
<scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view id="green" class="scroll-view-item bc_green"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>
<view class="btn-area">
<button size="mini" bindtap="tap">滑动到固定条目 </button>
<button size="mini" bindtap="tapMove">点击移动</button>
</view>
</view>
<view class="section section_gap">
<view class="section__title">horizontal scroll</view>
<scroll-view scroll-x style="width: 100%">
<view class="scroll-view_H">
<view id="green" class="scroll-view-item_H bc_green"></view>
<view id="red" class="scroll-view-item_H bc_red"></view>
<view id="yellow" class="scroll-view-item_H bc_yellow"></view>
<view id="blue" class="scroll-view-item_H bc_blue"></view>
</view>
</scroll-view>
</view>
wxss文件
.scroll-view-item {
width: 100%;
height: 80px;
}
.bc_green {
background: green;
}
.bc_red {
background: red;
}
.bc_yellow {
background: yellow;
}
.bc_blue {
background: blue;
}
.scroll-view_H{
width:500px;
height: 80px;
display: flex;
flex-direction: row;
}
.scroll-view-item_H{
height: 100%;
width: 200px;
}
js文件
//logs.js
const util = require('../../utils/util.js')
var order = ['green', 'red', 'blue', 'yellow' ]
Page({
data: {
scrollTop:100,
toView:'green'
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(log => {
return util.formatTime(new Date(log))
})
})
},
//监听
upper:function(e){
console.log("滚到顶部位置："+e)
},
lower: function (e) {
console.log("滚到底部位置：" + e)
},
scroll: function (e) {
console.log("滚动监听：" + e)
},
//设置滚动到固定条目
tap:function(e){
for(var i=0;i<order.length;i++){
if(order[i]==this.data.toView){
this.setData({
toView:order[I+1]
})
break
}
}
},
tapMove:function(e){
this.setData({
scrollTop:this.data.scrollTop+10
})
}
})
注意，设置属性的值只能"{{值}}"这个格式，否则无效
<!-- 错误 -->
<scroll-view scroll-x="false" style="width: 100%">
<!-- 正确 -->
<scroll-view scroll-x="{{false}}" style="width: 100%">
效果图：
image.png
3.组件之swiper
swiper是滑块视图容器，他可以通过手指对屏幕的滑动达到切换容器内容的效果
其中只可以放置<swiper-item/>组件，其他节点会自动删除
swiper-item
仅可以放在<swiper/>组件中，宽高自动设置为100%
image.png
image.png
image.png
代码
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/>
<slider bindchange="durationChange" show-value min="1000" max="10000"/>
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
],
indicatorDots: true,
autoplay: false,
interval: 5000,
duration: 1000
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function (e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function (e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function (e) {
this.setData({
duration: e.detail.value
})
}
})
效果图
image.png
4.组件之icon
image.png
代码
<view class="conta">
<view class="group">
<block wx:for="{{iconSizes}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="40"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="40" color="{{item}}"/>
</block>
</view>
</view>
// pages/icon/icon.js
Page({
/**
* 页面的初始数据
*/
data: {
iconSizes: [5,10, 20, 30.40,50,60,70],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
iconType: [
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
]
},
})
image.png
5.组件之text
文本
支持转义字符“"
除了文本节点以外，其他节点都无法长按选中
代码
wxml
<text>"{{textString}}"</text>
<text bindlongtap='longtap' bindtap='tap'>"{{textStringLine}}"</text>
js
Page({
/**
* 页面的初始数据
*/
data: {
textString: "文本",
textStringLine: "文本2"
},
longtap: function(e) {
this.setData({
textStringLine: "长按"
})
},
tap: function(e) {
this.setData({
textString: "点击"
})
}
})
效果图
image.png
6.组件之progress
进度条
image.png
代码 wxml
<progress show-info='{{true}}' percent='10' ></progress>
<progress active='{{true}}' percent='20' ></progress>
<progress show-info='{{true}}' percent='30'></progress>
<progress stroke-width='6' percent='40' ></progress>
image.png
网友评论