但是当我们设置了scroll-view的flex-direction:row等属性时,会发现没有用,列表依然垂直显示,像这样:
主要是因为display:flex等属性对于scroll-view来说是没有用的,此时我们只需要设置子试图的属性display: inline-block即可,不需要设置scroll-view的flex属性。
但是当我们设置完成后可能会出现一下情况:
会发现列表好像没有对齐,有两个子试图错位了,接下来我们可以通过设置子属性vertical-align:top来解决,最后会得到我们想要的效果。
最近做小程序,需要用到flex布局,发现垂直居中是用:vertical-align:middle或者line-height
后来发现这2个都不能完全实现图片与文字居中,这可怎么办?
我给start_k这个class加了vertical-align:middle,不行,后来又用line-height,还是不行
没有图片和文字还没居中对齐,最后改为align-items:center,就居中对齐了
最后查看了一下align-items:center的属性
居中对齐d性盒的各项元素:
view { display:flex
align-items:center
}
但是也遇到了align-items:center无法居中的问题,想了很久终于找到了解决办法。
解决方法可以查看博客那篇文章
[解决 flex align-items:center 无法居中(微信小程序)]
网址:( https://www.cnblogs.com/zzd0916/p/7218451.html )
1、背景图片设置可以用服务器上的图片。
2、也可以将本地图片转成base64的。
wxml:
<view class="topview-left" style="background-image: url({{background}})mode='scaleToFill'"/>
js:
data: {
background: "/style/images/icon_coupon_backgroud.png",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
//设置背景图片
let base64 = wx.getFileSystemManager().readFileSync(this.data.background, 'base64')
this.setData({
'background': 'data:image/pngbase64,' + base64
})
//设置导航栏标题
wx.setNavigationBarTitle({
title: '下发优惠券'
})
},
wxss:
.topview-left {
display: flex
flex-direction: column
align-items: center
justify-content: center
width: 30%
height: 113px
background-repeat: no-repeat/** 不重复*/
background-size: 100% 100%
background-image: url('data:image/pngbase64,base64码')/** 添加背景图片的*/
}
3、也可以直接设置定位实现。
<view style="display: flexalign-items: centertext-align:centerjustify-content: centermargin-bottom:10px">
<image src="/pagesChronic/images/icon_case_background.png" style="height:26pxwidth:167pxposition:absolute"></image>
<text style="position: relativecolor:#FF9721">评价</text>
</view>
效果:
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)