場景：多個頁面使用 UI畫面基本一致
舉個栗子：拿多個頁面 都有搜索框 點擊跳搜索頁面
實施：
創建公用組件頁面 search
search.wxml
<view class="search">
<view class="search-inputView flex-align-center" bindtap="callFather">
<image src="/assets/icons/icon_fd.png" bindtap="jumpsearch"></image>
<input placeholder="{{inputValue}}" value="" disabled></input>
</view>
</view>
search.css
.search {position: fixed;top: 0;z-index: 1001;width: 100%; background: #fff; left: 0;font-size: 28rpx;}
.flex-align-center{display: flex;align-items: center}
.search-inputView { width: 92%;box-sizing: border-box; margin: 20rpx 0;margin-left: 4%; height: 70rpx;line-height: 70rpx;
background: rgba(245, 247, 252, 1);padding: 0 30rpx; border-radius: 45rpx;}
.search-inputView input {width: 85%;margin-left: 10rpx; margin-right: 20rpx;}
.search-inputView image {width: 35rpx;height: 35rpx;}
.scroll-view {position: fixed;top: 180rpx;left: 0;z-index: 10002;}
search.js
Component({
properties: {
inputValue: {
type: String,
value: 'default value',
}
},
data: {
// 這裏是一些組件內部數據
someData: {}
},
created() {
console.log('被使用了~~~')
},
methods: {
jumpsearch: function() {
wx.navigateTo({
url: '/pages/search/search'
})
},
// 子組件點擊 傳遞參數到父組件 調用父組件事件
callFather: function (e) {
this.triggerEvent('callFather', e) //callFather自定義名稱事件，父組件中接收
},
}
})
使用組件頁面
index.wxml
<search inputValue="{{placeholderValue}}" bind:callFather ="callFather"></search>
index.json
{
"navigationBarTitleText": "首頁",
"usingComponents": {
"search": "../public/search",
}
}
index.js
Page({
data: {placeholderValue:'哈哈哈'},
callFather (e){
console.log(e)//父組件接收 子組件傳遞的參數
}
})
註釋：公用組件的css 是獨立的 沒法調用到app.css 的class