Mini开发

简介: Mini开发

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上重新拉代码

代码

正则

相关文章
|
3月前
|
小程序 前端开发 API
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
106 1
|
3月前
|
人工智能 小程序 编译器
Ant Design Mini 问题之Antd Mini 使用小程序函数式组件(functional-mini)来确保组件逻辑适配到双端,如何实现
Ant Design Mini 问题之Antd Mini 使用小程序函数式组件(functional-mini)来确保组件逻辑适配到双端,如何实现
|
5月前
|
人工智能 小程序 前端开发
Ant Design Mini 支持微信小程序啦!
Ant Design Mini 支持微信小程序啦!
483 0
Ant Design Mini 支持微信小程序啦!
|
JavaScript
自己创建一个mini-vue
mini-vue 本章在之前的章节的基础中实现了一个简单的vue框架,其中响应式的函数有略微变化不过大致原理相同。 致谢Vue Mastery非常好的课程,可以转载,但请声明源链接:文章源链接justin3go.com(有些latex公式某些平台不能渲染可查看这个网站)
61 0
|
JavaScript 前端开发 调度
浅析MVVM原理,实现一个mini-vue
浅析MVVM原理,实现一个mini-vue
94 0
浅析MVVM原理,实现一个mini-vue
|
存储 JSON 小程序
mini小程序入坑说明
mini小程序入坑说明
|
分布式计算 Hadoop Scala
五十、Spark组件部署(MINI版)
五十、Spark组件部署(MINI版)
五十、Spark组件部署(MINI版)
Mobile - iPhone12 mini、12、Pro、Pro Max 对比分析区别?
Mobile - iPhone12 mini、12、Pro、Pro Max 对比分析区别?
116 0
Mobile - iPhone12 mini、12、Pro、Pro Max 对比分析区别?
|
iOS开发
​iPad mini 6消息爆料,可能采用Air 4设计
在过去的两个月间,苹果召开了三次发布会,但鲜有媒体爆料关于iPad mini 6的消息。目前苹果iPad产品线中,已经更新了iPad Pro 2019、iPad Air 4和iPad 2020,唯独iPad mini还是去年三月份出的。
160 0
​iPad mini 6消息爆料,可能采用Air 4设计
|
前端开发 JavaScript API
Fusion Next 之 Form 组件的设计之路
前端的Form 表单主要用于解决数据获取、数据校验、数据赋值 这三大类问题。这篇文章里面的提供的解决方案能够比较完美的用在 React 框架上,但是解决问题的思路相信应该是可以使用于任何框架语言。 中后台的表单组件已经不仅仅有 input 和 select,可能还扩展到 范围选择器、日期选择器 等...
2410 0