uniapp 收藏按钮和悬浮按钮
2022-05-12 本文已影响0人
暴躁程序员
1. 文本切换收藏按钮:uni-fav(收藏/已收藏)
参考官网
属性
checked 是否为已收藏,默认值 false
star 按钮是否带星星,默认值 true
circle 是否为圆角,默认值 false
contentText 收藏按钮文字,默认值 {contentDefault: '收藏',contentFav: '已收藏'}
bgColor 未收藏时的背景色,默认值 #eeeeee
bgColorChecked 已收藏时的背景色,默认值 #007aff
fgColor 未收藏时的文字颜色,默认值 #666666
fgColorChecked 已收藏时的文字颜色,默认值 #FFFFFF
示例
<uni-fav
:checked="checked"
:star="false"
:circle="true"
:content-text="contentText"
bg-color="#dd524d"
bg-color-checked="#007aff"
fg-color="#ffffff"
fg-color-checked="#ffffff"
class="favBtn"
@click="favClick()" />
export default {
data() {
return {
checked: false,
contentText: {
contentDefault: '追番',
contentFav: '已追番'
}
}
},
methods: {
favClick() {
this.checked = !this.checked
}
}
}
<style lang="scss">
.favBtn {
margin: 0 20rpx 20rpx 0;
}
</style>
2. 悬浮展开按钮:uni-fab
参考官网
属性
pattern 可选样式配置项,类型 Object
color 文字默认颜色,默认值 #3c3e49
selectedColor 文字选中时的颜色,默认值 #007AFF
backgroundColor 背景色,默认值 #ffffff
buttonColor 按钮背景色,默认值 #3c3e49
content 展开菜单内容配置项,类型 Array
iconPath 图片路径
selectedIconPath 选中后图片路径
text 文字
active 是否选中当前
vertical 垂直对齐方式。bottom:下对齐,top:上对齐,默认值 bottom
direction 展开菜单显示方式。horizontal:水平显示,vertical:垂直显示,默认值 horizontal
popMenu 是否使用弹出菜单,默认值 true
@trigger 展开菜单点击事件,返回点击信息
@fabClic 悬浮按钮点击事件
示例
<uni-fab
ref="fab"
:pattern="pattern"
:content="content"
:horizontal="horizontal"
:vertical="vertical"
:direction="direction"
@trigger="trigger"
@fabClick="fabClick" />
export default {
data() {
return {
horizontal: 'left',
vertical: 'bottom',
direction: 'horizontal',
pattern: {
color: '#7A7E83',
backgroundColor: '#fff',
selectedColor: '#007AFF',
buttonColor: '#007AFF',
iconColor: '#fff'
},
content: [{
iconPath: '/static/image.png',
selectedIconPath: '/static/image-active.png',
text: '相册',
active: false
},
{
iconPath: '/static/home.png',
selectedIconPath: '/static/home-active.png',
text: '首页',
active: false
},
{
iconPath: '/static/star.png',
selectedIconPath: '/static/star-active.png',
text: '收藏',
active: false
}
]
}
},
onBackPress() {
if (this.$refs.fab.isShow) {
this.$refs.fab.close()
return true
}
return false
},
methods: {
trigger(e) {
console.log(e)
this.content[e.index].active = !e.item.active
uni.showModal({
title: '提示',
content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
fabClick() {
uni.showToast({
title: '点击了悬浮按钮',
icon: 'none'
})
},
}
}