Question

我想将基于vue的自定义组件插入swiperJS的虚拟滑块中，如何启用呢？我认为虚拟滑块的renderExternal方法不是我想要的。

Answer 1

我正在从这里使用Vue swiper包装器：https://surmon-china.github.io/vue-awesome-swiper/，但是如果您使用的是原始JS，则可能与此类似。

这就是我所做的。但是我一直想使用带有大量幻灯片的滑块，因此是虚拟部分。不确定是否可以只做渲染外部部分...在您的export default class SetWorkingHours extends Component { constructor() { super(); this.state = { workingDays: ['א׳', 'ב׳', 'ג׳', 'ד׳', 'ה׳', 'ו׳'].map((day, _id) => ({ _id, name: day, hours: [], active: false, })), activeButton: -1, } } static defaultProps = {}; sortHoursByTime(day) { let sortedDays = day; sortedDays.hours.sort((obj1,obj2) => obj1.fromTime < obj2.toTime); this.setState({workingDays: sortedDays}); } appendWorkingHours = (hours) => { let dateHours = { fromTime: this.formatDateToHourString(new Date(hours.fromDate)), toTime: this.formatDateToHourString(new Date(hours.toDate)) }; let selectedWorkingDays = this.state.workingDays; selectedWorkingDays.forEach((day) => { if (day.active && this.isHoursValid(day, dateHours)) { day.hours.push(dateHours); this.sortHoursByTime(day) } }); this.setState({workingDays: selectedWorkingDays}) } // Editor's note: the closing curly brace of appendWorkingHours method // was missing, so I added this line. };中，添加：

swiperOptions

virtual: { slides: <your slide data list>, renderExternal: this.virtualRenderExternal, },是在方法块中定义的地方：

this.virtualRenderExternal

virtualRenderExternal(data) { this.virtualData = data; },是this.virtualData块中定义的内容。在实际的刷卡区域：

data()

附录：正确内嵌renderExternal：

<swiper ref="vue-awesome-swiper" :options="swiperOption">
    <swiper-slide
        v-for="(slide, index) in virtualData.slides"
        :key="index"
        :style="{left: `${virtualData.offset}px`}"
      >
        [ Do whatever you want with slide (which is the data from your own array) to create components and so on ]
    </swiper-slide>
</swiper>

如何将Vue组件插入虚拟幻灯片？

1 个答案: