自定義TabButton組件(小程序+Vue)
最近由於寫小程序的哥們兒沒有時間，拖了一個月說基本還沒開寫，當時就決定不能再拖了，自己上吧。於是一邊學習小程序，一邊開發項目，然後順便舉一反三學習一下Vue(感覺小程序在某種程度上跟Vue還是挺像的)。我真的是太難了…
本篇博客是記錄一下TabButton，模塊化開發嘛，下次可以自己抄自己了
因爲項目裏有這兩種樣式的需求，所以設置的參數多了點，比如左邊距，右邊距，寬高等等，當然也有一個默認的值，默認的樣式是第二種。考慮到一個App/小程序就一種風格，所以顏色這些是在組件的css裏面寫好的，有需要的朋友可以自己修改
tab-button.wxml
<view class="tab_button" style="height:{{h}}px;line-height:{{h}}px;display:{{display}};margin-left:{{margin_left}}px;">
<ul>
<li wx:for='{{options}}' wx:key='this' wx:for-index='index' wx:for-item='item' bindtap="tab_button_select" data-id='{{index}}' class='{{index == tab_button_active ? "tab_button_active" : "tab_button_normal"}}' style="margin-right: {{margin_right}}px;width:{{w}}px">{{item.value}}</li>
</ul>
</view>
tab-button.wxss
/*條件篩選*/
.tab_button {
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
/* height: 30px; */
/* line-height: 30px; */
}
.tab_button ul {
list-style: none;
}
.tab_button_normal {
color: rgb(0, 0, 0);
float: left;
background: rgb(239, 240, 241);
/* margin-right: 15px; */
/* line-height: 30px; */
/* width: 50px; */
font-size: 13px;
text-align: center;
}
.tab_button_active {
color: white;
float: left;
background: #169bd5;
/* margin-right: 15px; */
/* line-height: 30px; */
/* width: 50px; */
font-size: 13px;
text-align: center;
}
tab-button.js
Component({
properties: {
margin_right: {
type: Number,
value: 15
},
h: {
type: Number,
value: 30
},
w: {
type: Number,
value: 50
},
display: {
type: String,
value: 'block'
},
margin_left: {
type: Number,
value: 15
},
options: {
type: [],
value: [{
value: '全部'
},
{
value: '未發佈'
},
{
value: '已發佈'
}
],
}
},
data: {
tab_button_active: 0,
},
methods: {
tab_button_select: function (event) {
//this.setData()將數據從邏輯層更新到視圖層，帶動樣式的改變
this.setData({
tab_button_active: event.currentTarget.dataset.id
})
this.triggerEvent('tab_button_select', event.currentTarget.dataset.id)
},
}
})
tab-button.json
{
"component": true,
"usingComponents": {}
}
使用組件
second.json
{
"usingComponents": {
"tab-button": "../../component/tab-button/tab-button"
}
}
second.js
Page({
data: {
option1: [{
value: '資產'
},
{
value: '支付'
}
],
option2: [{
value: '全部'
},
{
value: '未發佈'
},
{
value: '已發佈'
}
],
},
onLoad: function(options) {
},
onShow: function() {
},
onPullDownRefresh: function() {
},
tab_button_select1: function(event) {
console.log(event.detail)
},
tab_button_select2: function(event) {
console.log(event.detail)
},
})
second.wxml
<tab-button margin_right="0" bindtab_button_select="tab_button_select1" w="120" h="50" display="flex" margin_left="0" options="{{option1}}"></tab-button>
<view class="mid"></view>
<tab-button bindtab_button_select="tab_button_select2" w="50" h="30" options="{{option2}}"></tab-button>
second.wxss
.mid{
width: 100%;
height: 100px;
}
tabButton.vue
<template>
<div
class="tab_button"
:style="{
height: h + 'px',
lineHeight: h + 'px',
display: dsp,
marginLeft: ml + 'px'
}"
>
<ul>
<li
v-for="(item, index) in options"
:key="this"
@click="tab_button_select"
:data-id="index"
:class="
index == tabButtonActive ? 'tab_button_active' : 'tab_button_normal'
"
:style="{ marginRight: mr + 'px', width: w + 'px' }"
>
{{ item.value }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "tab-button",
data() {
return {
tabButtonActive: 0
};
},
props: {
mr: {
type: [Number, String],
default: 15
},
h: {
type: [Number, String],
default: 30
},
w: {
type: [Number, String],
default: 50
},
dsp: {
type: String,
default: "block"
},
ml: {
type: [Number, String],
default: 15
},
options: {
type: Array,
default: [
{
value: "全部"
},
{
value: "未發佈"
},
{
value: "已發佈"
}
]
}
},
methods: {
tab_button_select: function(event) {
this.tabButtonActive = event.currentTarget.dataset.id;
this.$forceUpdate(); //將數據從邏輯層更新到視圖層，帶動樣式的改變
this.$emit("tab_button_select", event.currentTarget.dataset.id);
}
}
};
</script>
<style scoped>
.tab_button {
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
/* height: 30px; */
/* line-height: 30px; */
}
.tab_button ul {
list-style: none;
}
.tab_button_normal {
color: rgb(0, 0, 0);
float: left;
background: rgb(239, 240, 241);
/* margin-right: 15px; */
/* line-height: 30px; */
/* width: 50px; */
font-size: 13px;
text-align: center;
}
.tab_button_active {
color: white;
float: left;
background: #169bd5;
/* margin-right: 15px; */
/* line-height: 30px; */
/* width: 50px; */
font-size: 13px;
text-align: center;
}
</style>
使用組件
HelloWorld.vue
<template>
<div>
<tabButton
@tab_button_select="tab_button_select1"
mr="0"
w="120"
h="50"
dsp="flex"
ml="0"
:options="option1"
></tabButton>
<div class="mid"></div>
<tabButton
@tab_button_select="tab_button_select2"
w="50"
h="30"
:options="option2"
></tabButton>
</div>
</template>
<script>
import tabButton from "./tabButton";
export default {
name: "HelloWorld",
components: {
tabButton
},
data() {
return {
option1: [
{
value: "資產"
},
{
value: "支付"
}
],
option2: [
{
value: "全部"
},
{
value: "未發佈"
},
{
value: "已發佈"
}
]
};
},
created() {},
methods: {
tab_button_select1: function(index) {
console.log(index);
},
tab_button_select2: function(index) {
console.log(index);
}
}
};
</script>
<style scoped>
.mid {
width: 100%;
height: 100px;
}
</style>
新人學習前端，有不足的地方還請指教。感謝！