空&白的博客

效果描述：第一个方块1s内旋转90度静止，第二个方块1s内旋转90度静止，第三个方块1s内旋转90度静止，第一个方块1s内旋转90度静止…相关参数：animation-duration、animation-iteration-count、transform: rotate(90deg)思路：完成整个动作需要4s，其中第1秒在执行动作，剩下3s为静止。

既然跟"enablePullDownRefresh": true冲突，那么就删掉或者设置为false（如果页面没有下拉功能的话是可以行的）网上查了下，说是scroll-view与pages.json设置的"enablePullDownRefresh": true冲突。另外一种就是在scroll-view标签里加上【@touchmove.stop】即可（只要scroll-view没有下拉的操作）。

【代码】uniapp 隐藏scroll-view的滚动条。

【代码】scroll-view :scroll-x=“true“ 水平滚动。

如果在固定的内容里，有一个数据为动态，并且可以很多，会导致固定的内容高度不是一个固定值。用获取元素的api（例如uniapp的createSelectorQuery），虽然可以获取高度，但是不太建议。通常来讲，要布局一个底部按钮固定，中间内容可以滑动，都会用中间内容padding-bottom固定内容的高度来使内容可以滑动到看见全部。后面找到用弹性布局来解决的办法。以上代码即可实现同样效果。

【代码】scss定义公共css。

在css上增加word-wrap: break-word;错误样式如上，超出了规定的文本区域。

align-content: flex-start

解释下上面的效果：当元素tabs-s滑动到距离顶部60rpx的时候，会“固定”在那个地方，不会随着页面的向上滑动而滑动；但是向下滑动距离顶部小于60rpx的话，那元素tabs-s也会跟着向下滑动。用样式position: sticky;来做吸顶其实很简单，只要在设置一个top属性即可。

字体颜色和背景颜色根据项目ui自行设定，后续有遇到在增加。

上面的一行还是可以放置很多个字符的，但是就是换行了。加上word-break:break-all;要求填充满整行，超过在换行。

实际上数据又长又短，例如类型有可能出现2行甚至3行的字数，所以整个行要适配最高的高度，然后其他子元素继承行的高度。ps：原生的table或者uview的u-table都不怎么好使，所以用view来做。弹性布局，行的align-items设置为stretch，不设置高度，可以设置。在做的过程中出现高度不一致导致border没能链接上。,height:inherit继承父元素的高度。

要做一个如下的弹窗，很简单。但是当要切换成多语言或者数据是动态的话（title可能会很长），那么弹窗固定宽度就不适用了。ps:ml-18 f30 text-333 flex align-center 一些封装的样式。也有可能出现下面的情况，文字被换行了（有时候这种情况也是可以的，取决于项目要求）1.弹窗不设置width，但是可以设置最小宽度（min-width）2.整体布局正常（我这边用的是弹性布局），重点是。这种情况是弹窗不设置width，设置。但是我想要的是下图的样式。有可能会出现下图的情况。

项目需求：这是个导航栏（下面是uveiw的tabs标签），然后高亮的时候会有一个背景图，因为title不固定字数，所以宽度不能写死。后面找了下，发现item-title样式加上position: relative;因为用的是相对、绝对定位，会导致图片会覆盖到文字上。自己写了个样式，用scroll-view，

css制作序列帧动画

uniapp修改swiper indicator-dots样式

css3动画/*这是一个动画，从上面（top:0）移动到下面（top:364px）*/.animTitle{ font-size:62px; font-weight:bold; color: #fff; text-align: center; position: absolute; margin: ...

简单效果图内容高度不设置 随内容的高低而显示<div class="one"> <div class="backfff wid50" v-for="(i,index) in list" :key="index"> 内容... </div></div>let list=[{},{},{},{}].one{/*关键样式代码*/ -webkit-column-count: 2; column-count: 2;/*代表一行几列*/}

在明确宽高尺寸情况下，实现水平垂直居中方法：1、使用固定定位.div{ width: 300px; height: 100px; background:#fff; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}2、使用相对定位与绝对定位<div class="div1"> <div class="div2"></div>