首先提醒一下大家游伍姿，如果你现在button标签不能用，不用担心，那是因为微信小程序存在神绝一个bug，你仔细看一下你的button标签的代码是不是这样的
<button>Content<button/>//而正确的代码是这样的<button>Content</button>123
1.在index.wxml中设置button按钮
上代码
<view class="page"><button size="default">Content</button><button size="mini">Content</button><button type="default">Content</button><橘拍button type="primary">Content</button><button type="warn">Content</button><button type="primary" plain="true">Content</button><button type="primary" disabled="true">Content</button><button type="primary" loading="true">Content</button><button type="primary" fromTyoe="reset">Content</button><button type="primary"hover-class="none">Content</button></view>1234567891011121314
解释
<view class ="container">//设置button的大小 <button size="mini|default">按钮</button>//设置button类型<button type="warn|default|primary">按钮</button>//是否透明<button plain="true">按钮</button>//是否禁用<button disable="true">按钮</button>//是否设置为加载按钮<button loa ding="true">按钮</button>//点击button的响应 效果<button hover-class="none">按钮</button>//给button绑定一个点击时间,thing 在js文件中设置<button bindtap="thing">按钮</button></view>1234567891011121314151617
2.icon图标的设置
上图
**上代码**style标签下的属性是为了让图像呈横向显示
wx：for语句类似于java，c++中的for循环语句，这里只是简化了步骤，你把数组在wx：for标签中实例化，然后{{item}}直接把就会从第一个显示到最后一个，省去了很多步骤，但我不知道这个，如果好几个数组嵌套循环的话，不知道怎么写？
<view class="page">
<icon type="success" size="50" color="red"></icon>
<view>------------------------------------</view>
<view style="display:inline-block">
<block wx:for="{{[10,20,30,40,50,60]}}">
<icon type="info" size="{{item}}"></icon>
</block>
</view>
<view>------------------------------------</view>
<view style="display:inline-block">
<block wx:for="{{iconColor}}">
<icon type="success" size="50"color="{{item}}"></icon>
</block>
</view>
<view>------------------------------------</view>
<view style="display:inline-block">
<block wx:for="{{iconType}}">
<icon size="50"type="{{item}}"></icon>
</block>
</view>
</view>1234567891011121314151617181920212223
index.js —– js文件一般有两种书写方式，一种就是这样，先实例化一个变量param，在里边写属性，然后再Page里边注册；另一种就是直接在Page里边设置属性。
var param={
data:{
iconSize:[20,30,40,50,60,70],
iconColor:[ 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'],
iconType: ['success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn','success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download','info_circle', 'cancel', 'search', 'clear'
]
}
}
Page(param)
可以把组件的属搜旅闭性写到data-xxx里面 当镇陵点击的时候获取
比如
<button size="mini" data-button_size="mini" 世裂bindtap="click"><button>然后在点击事件里面获取button-size就可以了
组件说明:
可滚动视图渗扮区域。
组件用法：
纵向滚动用法
Tip:
使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height，否则无法滚动。
当滚动到顶部时会触发bindscrolltoupper事件（具体可留意GIF输出）
当滚动到底部时会触发bindscrolltolower事件（具体可留意GIF输出）
效果图：
wxml
<scroll-view scroll-y="true" 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">click me to scroll into view </button>
<button size="mini" bindtap="tapMove">click me to scroll</button>
</view>
js
var order = ['red', 'yellow', 'blue', 'green', '亏喊稿red']
Page({
data: {
toView: 'green',
scrollTop: 100,
scrollLeft: 0
},
//滚动条滚到顶部的时候触发
upper: function(e) {
console.log(e)
},
//滚动条滚到底部的时候触发
lower: function(e) {
console.log(e)
},
//滚动条滚动后触发
scroll: function(e) {
console.log(e)
},
//点击按钮切换到下一个view
tap: function(e) {
for (var i = 0i <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
})
}
})
css
.scroll-view_H{
white-space: nowrap
}
.scroll-view-item{
height: 200px
}
.scroll-view-item_H{
display: inline-block
width: 100%
height: 200px
}
横向滚动用法
Tip:
横向滚销孝动无法使用scroll-into-view属性。
当滚动到最左边时会触发bindscrolltoupper事件（具体可留意GIF输出）
当滚动到最右边时会触发bindscrolltolower事件（具体可留意GIF输出）
效果图：
wxml
<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-left="{{scrollLeft}}">
<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>
</scroll-view>
js
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
data: {
toView: 'green',
scrollTop: 100,
scrollLeft: 0
},
//滚动条滚到顶部的时候触发
upper: function(e) {
console.log(e)
},
//滚动条滚到底部的时候触发
lower: function(e) {
console.log(e)
},
//滚动条滚动后触发
scroll: function(e) {
console.log(e)
},
//点击按钮切换到下一个view
tap: function(e) {
for (var i = 0i <order.length++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1]
})
break
}
}
},
//通过设置滚动条位置实现画面滚动
tapMove: function(e) {
this.setData({
scrollLeft: this.data.scrollLeft + 10
})
}
})
wxss
.scroll-view_H{
white-space: nowrap
}
.scroll-view-item{
height: 200px
}
.scroll-view-item_H{
display: inline-block
width: 100%
height: 200px
}
主要属性：
属性类型默认值描述
scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber50距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-thresholdNumber50距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-topNumber设置竖向滚动条位置
scroll-leftNumber设置横向滚动条位置
scroll-into-viewString值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部
bindscrolltoupperEventHandle滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolowerEventHandle滚动到底部/右边，会触发 scrolltolower 事件
bindscrollEventHandle滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）