Mini开发
迪丽瓦拉
2024-03-02 02:55:40
0

样式需求:

  • 01-小程序轮播图指示点样式变更:

    wxml:

    wxml:
    {binnerList}}" wx:key="id">{item.VISIBLE==2||item.VISIBLE==3?true:false}}" bindtap="onbinnerTap" data-jump="{{item.IS_JUMP}}" data-path="{{item.JUMP_PATH}}" data-type="{{item.PIC_TYPE}}">{sheibai}}" src="{{item.ADDRESS}}" mode="scaleToFill"> 
    
    

    wxss:

    /* 轮播图点点修改成横线 */.swiper .wx-swiper-dots.wx-swiper-dots-horizontal { //指示点位置margin-bottom: 6rpx;/* margin-left: 200rpx; */
    }.swiper .wx-swiper-dot { // 指示点样式width: 40rpx;display: inline-flex;height: 5rpx;margin-left: 10rpx;justify-content: space-between;border-radius: 3rpx;
    }.swiper .wx-swiper-dot::before { // 指示点样式content: '';flex-grow: 1;background: #ccc8c8;
    }.swiper .wx-swiper-dot-active::before { //指示点激活样式background-color: #3874f6;
    }
    
  • 02-小程序动画效果闪烁样式渲染:

    有css库可以引入直接使用类名 — 教程

    
    
    /* 闪烁效果 */
    .point {width: 0px;height: 0px;background-color: #2ea598;position: absolute;top:162px;right:100px;border-radius: 50%;
    }/* 设置动画前颜色 */
    .point-flicker:after {background-color: rgb(238, 47, 47);
    }/* 设置动画后颜色 */
    .point-flicker:before {background-color: #fff;
    }/* 设置动画 */
    .point-flicker:before,
    .point-flicker:after {content: '';width: 15px;height: 15px;position: absolute;left: 50%;top: 50%;margin-left: -10px;margin-top: -10px;border-radius: 50%;animation: warn 1.5s ease-out 0s infinite; 
    }
    /* 动画名字 一个周期多长时间 匀速开始  */@keyframes warn {0% {transform: scale(0.5);opacity: 0;}30% {opacity: 1;}50% {transform: scale(1.3);opacity: 1;}70% {opacity: 0;}100% {transform: scale(0.5);opacity: 0;}
    }
    

兼容问题:

  • 01-小程序IOS16 - text-align-last: justify占一行

    主要是将 text-align 改成left

    css样式设置:max-width

    伪元素设置:(不推荐,伪元素占位)

    添加类名left

    .content:before, .content:after {display: inline-block;/*行内元素*/content: '';width: 100%;/*可以挤掉文字,保证不跟文字在同一行*/height: 0;visibility: hidden;
    }
    // 加一个left类名
    .weui-form-preview__label{text-align: left;height: 50rpx;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;}
    
  • 02-小程序压缩给别人打开,预览出现代码包体积过大,解决直接从gitLab上重新拉代码

代码

  • 正则

相关内容