場(chǎng)景：多個(gè)頁(yè)面使用 UI畫面基本一致
舉個(gè)栗子：拿多個(gè)頁(yè)面 都有搜索框 點(diǎn)擊跳搜索頁(yè)面
實(shí)施：
? ? ? ? 創(chuàng)建公用組件頁(yè)面?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: {
? ? // 這里是一些組件內(nèi)部數(shù)據(jù)
? ? someData: {}
? },
? created() {
? ? console.log('被使用了~~~')
? },
? methods: {
? ? jumpsearch: function() {
? ? ? wx.navigateTo({
? ? ? ? url: '/pages/search/search'
? ? ? })
? ? },
? ? // 子組件點(diǎn)擊 傳遞參數(shù)到父組件 調(diào)用父組件事件?
? ? callFather: function (e) {
? ? ? this.triggerEvent('callFather', e ) // callFather 自定義名稱事件莫瞬，父組件中接收
? ? },
? }
})
? ??????
? ? ? ?使用組件頁(yè)面
? ? ? ? index.wxml
? ??????<search inputValue="{{placeholderValue}}"? bind: callFather =" callFather "></search>
?????????index.json
? ??????{
????????????"navigationBarTitleText": "首頁(yè)",
? ? ? ? ? ?"usingComponents": {
? ? ? ? ? ????????"search": "../public/search",
? ????????????}
????????}
? ??????index.js
? ??????Page({
? ????????data: {placeholderValue:'哈哈哈'},
? ? ? ? ? ?callFather (e){
? ? ? ? ? ? console.log(e) //父組件接收 子組件傳遞的參數(shù)
????????????}????
????????})
