工作中遇到的问题

84 阅读1分钟

一、单点登录,返回登录触发页,再点击回退按钮。

## 比如:一个商城,首页 --->  列表页 ---> 详情页,在详情页触发登录,
然后在统一登录位置登陆成功后,重返到详情页,再点击回退按钮。

二、当父元素设置了display:flex,子元素需要单行省略号展示时,怎么设置css样式。就不会挤压兄弟元素。

   HTML: 
   <div class="father">
       <div class="child1"></div>
       <div class="child2"></div>
    </div>
    
    css:
    .father{
        display: flex;
    }
    .child1 {
        width:150px;
    }
    .child2{
        flex:1,
        width:0, // 设置了宽度为0 ,就不会挤压child1的宽度,就可实现单行省略号
        display: inline-block; // 最好加一个,要不然有些兼容问题
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    

三、15分钟倒计时的兼容写法,主要是为了兼容iPhone11

setexpireTime2(time) {
        let _this = this;
        // 使用正则表达式匹配时间字符串,将其转换为 ISO 格式
        const match = time.match(/(\d{4})-(\d{2})-(\d{2})\s(\d{2}):(\d{2}):(\d{2})/);
        if (!match) {
            console.log('无效的时间格式');
            return;
        }

        const [_, year, month, day, hours, minutes, seconds] = match;
        const targetTime = new Date(`${year}-${month}-${day}T${hours}:${minutes}:${seconds}`);

        const currentTime = targetTime.getTime();
        console.log(currentTime);

        // 计算 15 分钟后的时间戳
        const endTime = currentTime + 15 * 60 * 1000;

        // 更新剩余时间并显示倒计时
        this.countdownInterval = setInterval(() => {
            const remainingTime = endTime - Date.now();
            const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
            console.log('ddd');
            console.log(`${minutes} 分钟 ${seconds} 秒`);
            _this.time =
                Math.floor(seconds) < 10 ? `${minutes}:0${seconds}` : `${minutes}:${seconds}`;
            if (remainingTime <= 0) {
                _this.time = '00:00';
                clearInterval(_this.countdownInterval);
                console.log('倒计时结束');
            }
        }, 1000);
    },

四、在ios手机app内嵌H5页面,会出现页面被缓存的情况,回到也不走mounted,也不走activited。

可以使用`window.addEventListener('pageshow', () => {})`,来做一些操作。