uniapp 各种兼容,优化等问题记录
rich-text富文本图片之间有空白-富文本全是图片并且需要去掉空白处理。对于ios自带的上下拉-进行禁用-
·
对于ios自带的上下拉-进行禁用-橡皮筋回弹
1.pages.json中加入如下配置
{
"path": "pages/my/my",
"style": {
"navigationBarTitleText": "个人中心",
"disableScroll": true,//禁止滑动
"enablePullDownRefresh": false,
"navigationBarTextStyle": "white",
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#4095E5"
}
}
2.页面中如果需要滚动 加入scroll-view组件
<scroll-view scroll-y="true" class="scontent" :enhanced="true" :bounces="false" :show-scrollbar="false">
</scroll-view>
<style>
.content{
//可视高度,需要在多大的盒子中进行滑动
height: 100vh;
width: 100%;//视情况设置
}
</style>
rich-text富文本图片之间有空白-富文本全是图片并且需要去掉空白处理
1.font-size: 0;时文字内容会全部不显示
<rich-text :nodes="data.content" :style="flag?'font-size: 0;':''"></rich-text>
2.使用标识font; 选择去不去除空白
if (res.content.indexOf('font;') != -1) {
this.flag = true;//去除图片空白,此时所有文字不会显示
//res.content = res.content.replace("font;", "");//标识去除,不显示文字,所以不需要替换去除
}
this.data = res
去除button所有默认样式
.buttonClear {
color: #333;
text-align: center;
border: none;
border-radius: 0;
background-color: transparent;
display: flex;
padding: 0px;
magin: 0px;
}
.buttonClear::after {
border: none;
}
点击放大
.carpush:active {
transform: scale(1.8);
}
弹跳
<uni-grid :column="5" :show-border="false" :square="false">
<uni-grid-item v-for="(item ,index) in classList" :index="index" :key="index">
<view class="grid-item-box" @click="clickClass(item.id)">
<image class="image" :src="item.icon" mode="aspectFill" />
<text class="text">{{item.title}}</text>
<!-- <view v-if="item.badge" class="grid-dot">
<uni-badge :text="item.badge" :type="item.type" />
</view> -->
</view>
</uni-grid-item>
</uni-grid>
<style lang="scss">
.image {
width: 57px;
height: 57px;
position: relative;
animation: myfirst 2s;
/* Safari and Chrome */
-webkit-animation: myfirst 2s;
}
@keyframes myfirst {
10% {
left: 0px;
top: 0px;
}
40% {
left: 0px;
top: -20px;
}
45% {
left: 0px;
top: 0px;
}
65% {
left: 0px;
top: -8px;
}
70% {
left: 0px;
top: 0px;
}
80% {
left: 0px;
top: -2px;
}
90% {
left: 0px;
top: 0px;
}
}
@-webkit-keyframes myfirst {
10% {
left: 0px;
top: 0px;
}
40% {
left: 0px;
top: -20px;
}
45% {
left: 0px;
top: 0px;
}
65% {
left: 0px;
top: -8px;
}
70% {
left: 0px;
top: 0px;
}
80% {
left: 0px;
top: -2px;
}
90% {
left: 0px;
top: 0px;
}
}
</style>
更多推荐
已为社区贡献5条内容
所有评论(0)