微信小程序的swiper組件中的swiper-item標(biāo)簽里使用了slot,但是現(xiàn)在slot的內(nèi)容不顯示,不知道什么原因,也有百度到swiper中不讓嵌套其他,但是這個(gè)其他包不包括slot我也不清楚,文檔上我也沒有找到相關(guān)的描述
做一個(gè)tab切換的功能,content部分用swiper組件來實(shí)現(xiàn),單個(gè)頁(yè)面已經(jīng)可以實(shí)現(xiàn)。現(xiàn)在我想把這部分抽離出來做成一個(gè)可復(fù)用的組件,那就意味著內(nèi)容是動(dòng)態(tài)的,我的想法是用slot來實(shí)現(xiàn),但是最后的效果一直都不對(duì)
調(diào)用組件的頁(yè)面:
<tab menu='{{menu}}'>
<view class='borrow-list' id='list'>
我是slot
</view>
</tab>
tab組件的代碼:
<view class='tabMenu'>
<view class='tabItem' bindtap='tabChange'>
<view wx:for='{{menu}}' wx:key='{{index}}' id='t{{index+1}}' data-flag='{{index}}' class='{{active==("t"+(index+1)) ? "active":""}}'>{{item.text}}</view>
</view>
<view id='tabline' class='tabline' style='left:{{left||"91rpx"}}'></view>
</view>
<view>
<swiper bindchange='swiperChange' current = '{{current}}' style='height:{{swiperHeight+"px"}}'>
<swiper-item item-id='t1'>
<slot></slot>
</swiper-item>
</swiper>
</view>
這樣寫之后在console查看代碼結(jié)構(gòu)如下:
slot的內(nèi)容沒有插入到swiper-item中,然后我又給slot加了name,最后的結(jié)果如下:
問題一:swiper中slot能不能使用(文檔中哪里有體現(xiàn))
問題二:swiper中如果不能使用slot,那有什么辦法可以實(shí)現(xiàn)動(dòng)態(tài)內(nèi)容部分
其實(shí)我之前還嘗試了另一個(gè)辦法,就是swiper不寫在tab組件內(nèi)寫在調(diào)用tab的頁(yè)面里,但是因?yàn)橛新?lián)動(dòng)效果(滑動(dòng)內(nèi)容,tab菜單動(dòng)態(tài)切換;點(diǎn)擊tab菜單,內(nèi)容滑動(dòng)變化)導(dǎo)致傳值是個(gè)問題,因?yàn)樾〕绦驔]有監(jiān)聽data變化的函數(shù)(比如watch),所以一旦我滑動(dòng)內(nèi)容部分,傳給tab組件的值的變化我是監(jiān)聽不到的。如果根據(jù)這個(gè)思路,大家有解決的辦法,也可以留言~3Q~
已解決,解決方案如下:
我最后采用了我的問題末尾提到的思路,tab的多個(gè)標(biāo)簽是一個(gè)組件,swiper放在調(diào)用組件的page頁(yè)中,那就面臨著要解決page和組件的傳值問題,看了一篇寫vue中watch的實(shí)現(xiàn)思路的文章(地址:https://segmentfault.com/a/11...)有所啟發(fā),使用Object.defineProperty()給監(jiān)聽的屬性設(shè)置存取器屬性,存取器屬性包含set和get方法,當(dāng)屬性發(fā)生變化時(shí),set和get自動(dòng)觸發(fā)達(dá)到監(jiān)聽屬性變化的目的
代碼實(shí)現(xiàn)部分:
組件調(diào)用方式:(menu是tab的選項(xiàng)名稱以及id等信息,是一個(gè)數(shù)組;currentItemId是當(dāng)前swiperItem的item-id)
<tab menu='{{menu}}' currentItemId='{{currentItemId}}' bind:changeEvent='changeEvent'></tab>
page頁(yè)中swiper組件:(swiperChange中能獲取到currentItemId)
<swiper bindchange='swiperChange' current = '{{current}}' style='height:{{swiperHeight+"px"}}'>
<swiper-item item-id='t1'>
//內(nèi)容
</swiper-item>
<swiper-item item-id='t2'>
//內(nèi)容
</swiper-item>
</swiper>
tab組件中接收currentItemId:
/**
* 組件的屬性列表
*/
properties: {
menu: {
type: Array,
value: null
},
currentItemId: {
type: String
}
}
同時(shí)在tab組件中定義一個(gè)初始數(shù)據(jù)方便之后使用Object.defineProperty():
/**
* 組件的初始數(shù)據(jù)
*/
data: {
copy: {}
},
之后在組件js的methods中定義watch函數(shù),監(jiān)聽的是接收到的currentItemId
watch: function (val) {
let _this = this
Object.defineProperty(_this.data, 'currentItemId', { //需要監(jiān)聽的currentItemId
enumerable: true,
configurable: true,
get: function () {
return _this.data.copy.currentItemId //此處使用的copy,其中的currentItemId字段始終與this.data.currentItemId相等,不可使用this.data.currentItemId,會(huì)造成死循環(huán)
},
set: function (newVal) {
var value = _this.data.copy.currentItemId
if (newVal === value) {
return
}
//為了使this.data.currentItemId == this.data.copy.currentItemId,需要在每一次this.data.currentItemId變化的時(shí)候也就是執(zhí)行set的時(shí)候?yàn)閠his.data.copy賦值 使兩個(gè)字段的值始終保持一致
_this.setData({
copy: {
currentItemId: newVal
}
})
//這個(gè)方法計(jì)算應(yīng)該切換到哪個(gè)選項(xiàng)的,不是問題的重點(diǎn)就不貼代碼了
_this.currCompute(_this.data.copy.currentItemId)
}
})
_this.setData({
copy: {
currentItemId: _this.data.currentItemId
}
})
}
-----------------以上完成了從page頁(yè)傳值到tab組件,tab組件中監(jiān)聽swiper的變化------------------
接下來說一下tab組件傳值到page頁(yè),就是組件中綁定的那個(gè)自定義事件changeEvent了,再貼一次代碼:
<tab menu='{{menu}}' currentItemId='{{currentItemId}}' bind:changeEvent='changeEvent'></tab>
當(dāng)tab組件中的選項(xiàng)被點(diǎn)擊切換的時(shí)候觸發(fā)changeEvent自定義事件,同時(shí)page頁(yè)定義changeEvent函數(shù)來接收傳過來的值(注意自定義事件名稱和觸發(fā)函數(shù)的名稱沒關(guān)系,就是懶得再起一個(gè)名稱而已)
tab組件js中的操作:
/*tab切換事件 */
tabChange: function (e) {
let id = e.target.id
var data = {
current: e.target.dataset.flag
}
this.triggerEvent('changeEvent', data) //changeEvent自定義事件的名稱
},
page頁(yè)中接收:
changeEvent: function(data) {
this.setData({
current: data.detail.current
})
}
-----------------以上完成了從tab組件傳值到page頁(yè)的操作,如果熟悉vue中的子組件向父組件傳值,應(yīng)該可以理解的------------------
以上,多謝@師寧丶童鞋和@WsmDyj童鞋解答~
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國(guó)IT技能型緊缺人才,是大數(shù)據(jù)專業(yè)的國(guó)家
達(dá)內(nèi)教育集團(tuán)成立于2002年,是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu),是中國(guó)一站式人才培養(yǎng)平臺(tái)、一站式人才輸送平臺(tái)。2014年4月3日在美國(guó)成功上市,融資1
北大課工場(chǎng)是北京大學(xué)校辦產(chǎn)業(yè)為響應(yīng)國(guó)家深化產(chǎn)教融合/校企合作的政策,積極推進(jìn)“中國(guó)制造2025”,實(shí)現(xiàn)中華民族偉大復(fù)興的升級(jí)產(chǎn)業(yè)鏈。利用北京大學(xué)優(yōu)質(zhì)教育資源及背
博為峰,中國(guó)職業(yè)人才培訓(xùn)領(lǐng)域的先行者
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔(dān)任項(xiàng)目經(jīng)理從事移動(dòng)互聯(lián)網(wǎng)管理及研發(fā)工作,曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項(xiàng)目經(jīng)理。精通Java與.NET 技術(shù), 熟練的跨平臺(tái)面向?qū)ο箝_發(fā)經(jīng)驗(yàn),技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點(diǎn)難點(diǎn)突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫(kù),具有快速界面開發(fā)的能力,對(duì)瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁(yè)制作和網(wǎng)頁(yè)游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗(yàn)。曾經(jīng)歷任德國(guó)Software AG 技術(shù)顧問,美國(guó)Dachieve 系統(tǒng)架構(gòu)師,美國(guó)AngelEngineers Inc. 系統(tǒng)架構(gòu)師。