Mini开发
样式需求:
01-小程序轮播图指示点样式变更:
wxml:
wxml: <swiper **class="swiper"**> <block wx:for="{{binnerList}}" wx:key="id"> <swiper-item wx:if="{{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}}"> <image class="lunboPic" style="filter:{{sheibai}}" src="{{item.ADDRESS}}" mode="scaleToFill"></image> </swiper-item> </block> </swiper>
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库可以引入直接使用类名 — 教程
<view class="point point-flicker"></view>
/* 闪烁效果 */ .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:befor
.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上重新拉代码
代码
正则