WeChat Mini Programs tab switching-the problem of using slot in swiper components (slot mode has been abandoned and tab components and swiper components are used to pass values to each other)
topic description
swiper-item tag in WeChat Mini Programs"s swiper component uses slot, but now the content of slot is not displayed. I don"t know why, and some Baidu does not allow nesting of other things in swiper, but I don"t know whether this other includes slot, and I can"t find the relevant description on the document
.
sources of topics and their own ideas
to do a tab switching function, the content part is implemented by swiper components, and a single page can already be implemented. Now I want to extract this part into a reusable component, which means that the content is dynamic. My idea is to implement it in slot, but the final effect has never been correct
.
related codes
Page of calling component:
<tab menu="{{menu}}">
<view class="borrow-list" id="list">
slot
</view>
</tab>
Code of the tab component:
<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>
after writing this, check the code structure in console as follows:
slotswiper-itemslotname:
question 1: can slot be used in swiper (where can it be reflected in the document)
question 2: if slot, cannot be used in swiper, is there any way to realize the dynamic content part
in fact, I have tried another method before, that is, swiper is not written in the tab component in the page that calls tab, but because of the linkage effect (sliding the content, the tab menu is dynamically switched; Clicking on the tab menu, the content slides to change) causing the value to be passed is a problem, because Mini Program does not listen to the function of data change (such as watch), so once I swipe the content section, I cannot listen to the change of the value passed to the tab component. If you have a solution according to this idea, you can also leave a message ~ 3Q
.
has been solved, and the solution is as follows:
I finally adopted the idea mentioned at the end of my question. Multiple tags of tab are a component, and swiper is placed in the page page of the calling component, so we are faced with solving the problem of passing values between page and components. I was inspired by an article about the implementation of watch in vue (address: https://codeshelper.com/a/11.). Use Object.defineProperty () to set the accessor property for the listening property. The accessor property contains set and get methods. When the property changes, set and get automatically trigger to listen for property changes
Code implementation:
component invocation method: (menu is the option name of tab, id and other information, and is an array; currentItemId is the item-id of the current swiperItem)
<tab menu='{{menu}}' currentItemId='{{currentItemId}}' bind:changeEvent='changeEvent'></tab>
currentItemId can be obtained from the swiper component in the page page in: (swiperChange)
<swiper bindchange='swiperChange' current = '{{current}}' style='height:{{swiperHeight+"px"}}'>
<swiper-item item-id='t1'>
//
</swiper-item>
<swiper-item item-id='t2'>
//
</swiper-item>
</swiper>
receive currentItemId: in tab component
/**
*
*/
properties: {
menu: {
type: Array,
value: null
},
currentItemId: {
type: String
}
}
use Object.defineProperty (): after it is convenient to define an initial data in the tab component at the same time
/**
*
*/
data: {
copy: {}
},
then define the watch function in the methods of the component js, listening to the received currentItemId
watch: function (val) {
let _this = this
Object.defineProperty(_this.data, 'currentItemId', { //currentItemId
enumerable: true,
configurable: true,
get: function () {
return _this.data.copy.currentItemId //copycurrentItemIdthis.data.currentItemIdthis.data.currentItemId,
},
set: function (newVal) {
var value = _this.data.copy.currentItemId
if (newVal === value) {
return
}
//this.data.currentItemId == this.data.copy.currentItemId,this.data.currentItemIdsetthis.data.copy
_this.setData({
copy: {
currentItemId: newVal
}
})
//
_this.currCompute(_this.data.copy.currentItemId)
}
})
_this.setData({
copy: {
currentItemId: _this.data.currentItemId
}
})
}
-the above completes passing the value from the page page to the tab component, and listens for changes in the swiper in the tab component.
next, let's talk about the value passed by the tab component to the page page, which is the custom event changeEvent bound in the component. Paste the code again:
<tab menu='{{menu}}' currentItemId='{{currentItemId}}' bind:changeEvent='changeEvent'></tab>
the changeEvent custom event is triggered when the option in the tab component is clicked, and the page page defines the changeEvent function to receive the passed value (note that the custom event name has nothing to do with the name of the trigger function, just don't bother to name it again)
actions in the tab component js:
/*tab */
tabChange: function (e) {
let id = e.target.id
var data = {
current: e.target.dataset.flag
}
this.triggerEvent('changeEvent', data) //changeEvent
},
receive in the page page:
changeEvent: function (data) {
this.setData({
current: data.detail.current
})
}
-the above completes the operation of passing values from the tab component to the page page. If you are familiar with passing values from the child components in vue to the parent components, you should be able to understand-
above, thank you @ Shining, Children's shoes and @ WsmDyj Children's shoes solution ~
suggest that you encapsulate a swiper component, or refer to swiper
in iview. Thank you, my company. Our company has encountered this problem when writing a public component library. The problem that wepy dynamic slots cannot be generated is also mentioned to the authorities. Wait for a solution. If you are using the framework of wepy, remember the corresponding name, when using slot. If you need to generate multiple swiperitme dynamically and have slot locations, the name of each slot is different. Native Mini Program does not have a slot slot. If you want to use slot, it is recommended to use wepy or mpvue.
