uniapp开发微信小程序--难点总结-灵析社区

1. 当前页返回上一页，实现页面数据刷新

在当前页面的卸载函数中，设置上一页data对象的falg数据，根据这个falg为真,来刷新页面数据

//当前页   
onUnload() {	
	let pages = getCurrentPages(); // 当前页面
	let beforePage = pages[pages.length - 2]; // 上一页
	beforePage.data.refreshIfNeeded = true;	
},

// 上一页
onShow() {
	var pages = getCurrentPages(); // 获取当前页面栈
	var currentPage = pages[pages.length - 1]; // 当前页面
	if (currentPage.data.refreshIfNeeded) {
		currentPage.data.refreshIfNeeded = false;
		this.refreshMethod(); // 当前页面 method中的方法，用来刷新当前页面
	}
},
methods: {
	refreshMethod() {
		this.getData()
	},
}

2. 实时展示当前年份及月份下的列表数据，切换年份或者月份实现列表数据改变

1.因为月份比较多，一排占不下，所以使用swiper组件，根据current属性来控制组件的滑动。

<view class="top-items cor333">
    <view class="chose-year flex-align">
            <view class="icon" @click="reduceyear"></view>
            <view class="year f34">
                    <text>{{currentyear}}</text>年
            </view>
            <view class="icon next active" @click="addyear"></view>
    </view>
    <view class="chose-month f30">
            <view class="page-section swiper">
                <view class="page-section-spacing" >
                    <swiper class="swiper" display-multiple-items="6" :current="current">
                        <swiper-item v-for="(item,index) in month" :key="index">
                                        <view class="swiper-item" :class="(currentmonth-1) == index? 'active': ''" @click="choseMonth(item+1)">{{item+1}}月</view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
    </view>
</view>

2.根据new Date()方法获取当前时间；getFullYear()方法获取当前年份；getMonth()方法获取当前月份，实际月份需要加1。

3.当当前月份大于6时，需要控制目前滑块索引current固定在第六个（因为swiper组件控制的同时显示的滑块数量为6个，当前月份为6时，说明实际月份为7，后面7-12月就不应该再滑动了）

data() {
        return {
                month: [0,1, 2, 3,4,5,6,7,8,9,10,11],
                current: 2,
                currentmonth: '',
                currentyear: 2022,
        };
},
created() {
        const newDate = new Date();
        const currentYear = newDate.getFullYear();
        const currentMonth = newDate.getMonth();
        this.currentyear = currentYear;
        this.currentmonth = currentMonth+1;
        if(currentMonth > 6){
                this.current = 6
        }else{
                this.current = this.currentmonth - 1
        }

        this.initData();
},

4.滑动到最后一月，实现自动跳转下一年份；滑动到一月，实现自动跳转上一年份

首先通过@touchstart和@touchend事件确定滑动方向，触摸开始的pageX大于触摸结束的pageX,说明是向右滑动；反之向左滑动

通过swiper的@animationfinish（动画结束时会触发）和@change（current 改变时会触发）事件做逻辑判断。当向右滑动，并且滑动到最后，改变当前月份、current,增加年份；当向左滑动，并且滑动到开始，改变当前月份、current,减少年份。因为第一次向右滑动到最后跳转年份正常，再次滑动到最后，current改变，但页面不再滑动到当前年份的开始位置，所以需要@change事件改变current值

touchstart(e) {
        this.startX = e.changedTouches[0].pageX;
},
touchend(e) {
        this.endX = e.changedTouches[0].pageX;
        if (this.startX > this.endX ) {
                this.toRight = true
        } else if(this.startX < this.endX ) {
                this.toRight = false
        }
},
animationfinish(e) {
        this.isChange = false
        let animationCurrent = e.detail.current

        if (this.toRight && animationCurrent == 6) {

                this.currentmonth = 1
                this.current = 0 
                this.addyear()
                // 写一个flag,swiper的change函数执行
                this.isChange = true
        } else if (this.toRight == false && animationCurrent == 0) {

                this.currentmonth = 1
                this.current = 0
                this.reduceyear()
        }

},

bindchange(e) {
        if (this.isChange) {
                this.$nextTick(() => {  
                                this.currentmonth = 1  
                                this.current = 0                 
                }); 
        }else{
                // change第一次正常回到第一个之后，没有改变this.current的代码始终不执行第二次
                const newDate = new Date()
                const currentMonth = newDate.getMonth() 
                const month = currentMonth + 1
                if (currentMonth > 6) {
                        this.current = 6
                } else {
                        this.current = month - 1
                }
        }

}

3. 实现图片预览

previewImage(imageURL, images) {
    uni.previewImage({
        current: imageURL, // 当前显示图片的 http 链接
        urls: images // 需要预览的图片链接列表，要求必须是数组
        // loop: true // 是否可循环预览
    })
}

4. 列表实现展开和收起

所有列表一开始都是展开的，点击不同的列表可以实现各自的展开和收起

首先页面获取到数据时，给每个数据列表动态设置一个属性，控制展开和收起的状态 is_fold为真收起，为假展开

this.proData.forEach(pro => {
   this.$set(pro,'is_fold',false)
})

2. 点击每个列表时，根据id判断是否为当前列表，改变is_fold属性,控制当前列表的状态

showLists(proId){
    this.proData.forEach(pro => {
            if(pro.id == proId){
                    const value = !pro.is_fold
                    this.$set(pro,'is_fold',value)
            }

    })
},