1***@qq.com
1***@qq.com
  • 发布:2019-11-07 23:17
  • 更新:2019-11-08 14:15
  • 阅读:4968

使用swiper时,怎么在change事件中改变当前的current,从而滑动到指定的位置

分类:uni-app

需求见标题,试过emit到父控件,改变当前控件的current,但是不起作用
业务场景
实现日历周模式的左右切换,默认三组周数据,左右切换的时候更新周数据(已实现),同时把swiper的current设置为1(没有解决),将上一周或者下一周的日期显示出来

模板

        <swiper class="swiper" v-if="viewmode == 'week'" :current-item-id="curItemIndex" @change="setDate">  
            <swiper-item class="swiper-item" v-for="(weeks, week) in canlender.weeks" :key="week" :item-id="'week_' + week">  
                <view class="uni-calender__body-date-week">  
                    <block v-for="(day, index) in weeks" :key="index">  
                        <view  
                            :class="{  
                                'uni-calender__disable': canlender.month !== day.month || day.disable,  
                                'uni-calender__date-current':  
                                    ((day.date == canlender.date && !day.checked) || day.multipleBegin || day.multipleEnd) && canlender.month == day.month && !day.disable,  
                                'uni-calender__lunar': lunar,  
                                'uni-calender__active': !day.isDay,  
                                'uni-calender__is-day': day.isDay,  
                                'uni-calender__multiple': day.multipleBegin || day.multipleEnd,  
                                'uni-calender__multiple-box': day.checked  
                            }"  
                            class="uni-calender__date"  
                            @tap="selectDays(week, index, canlender.month === day.month, day.disable, canlender.lunar)"  
                        >  
                            <view class="uni-calender__circle-box">  
                                {{ day.date }}  
                                <view v-if="lunar" class="uni-calender__lunar">{{ day.lunar }}</view>  
                                <view v-if="day.have" class="uni-calender__data-circle" />  
                                <view v-if="day.have && !lunar" class="uni-calender__lunar">{{ day.clockinfo.info }}</view>  
                            </view>  
                            <view  
                                :class="{ 'uni-calender_check': day.checked, 'calender_check-begin': day.multipleBegin, 'calender_check-end': day.multipleEnd }"  
                                class="uni-calender_check-bg"  
                            />  
                        </view>  
                    </block>  
                </view>  
            </swiper-item>  
        </swiper>

脚本

export default {  
    name: 'UniCalendarItem',  
    props: {  
        /**  
         * 当前日期  
         */  
        canlender: {  
            type: null,  
            default: () => {  
                return {};  
            }  
        },  
        lunar: {  
            type: Boolean,  
            default: false  
        },  
        viewmode: {  
            type: String,  
            default: 'month'  
        },  
        current: {  
            type: Number,  
            default: 0  
        }  
    },  
    data() {  
        return {  
            done: false,  
            curItemIndex: 'week_' + this.current  
        };  
    },  
    created() {},  
    methods: {  
        selectDays(week, index, ischeck, isDay, lunar) {  
            this.$emit('selectDays', {  
                week,  
                index,  
                ischeck,  
                isDay,  
                lunar  
            });  
        },  
        setDate(e) {  
            if (this.done) return;  
            var _this = this;  
            let index = --e.detail.current;  
            let cT = this.utils.date.dateAdd(new Date(this.canlender.year, this.canlender.month - 1, this.canlender.date), index, 'w');  
            new Promise(function(resolve) {  
                _this.done = true;  
                _this.change();  
                resolve.call();  
            }).then(function() {  
                _this.$emit('setDate', _this.utils.date.format(new Date(cT)));  
                _this.done = false;  
            });  
        },  
        change() {  
            this.$emit('setCurrent', 1);  
        }  
    }  
};

父控件

<uni-calendar-item :canlender="canlender" :current="currentIndex" :viewmode="viewmode" :lunar="isLunar" @selectDays="selectDays" @setDate="setDate"  @setCurrent="setCurrent"/>                   

        setCurrent(val){  
            this.$nextTick(function() {  
                console.log(val)  
                this.currentIndex = val;                  
            });  
        }
2019-11-07 23:17 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者)

已解决

  • 1***@qq.com

    可以发个demo学习一下吗

    2019-11-21 17:59

  • 1***@qq.com (作者)

    回复 1***@qq.com: 子控件调用父控件的方法,设置子控件的props属性和方法名一致

    2020-03-21 11:28

该问题目前已经被锁定, 无法添加新回复