微信小程序,写一个悬浮view,包括圆形头像和名字,都在view上左右居中
时间: 2024-02-18 14:59:40 浏览: 71
微信小程序开发中scroll-view左右滑动布局
可以通过使用组件`<view>`和`<image>`来实现。具体实现步骤如下:
1. 在`<view>`中添加`position: fixed`样式,使其可以悬浮在页面上。
2. 使用`<image>`添加圆形头像,并设置宽高、圆角和边框样式。
3. 在`<view>`中添加名字文本,并设置居中样式。
下面是示例代码:
```html
<view class="float-view" style="position: fixed;">
<image class="avatar" src="头像图片链接"></image>
<text class="name">名字</text>
</view>
```
```css
.float-view {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 50px;
padding: 0 10px;
background-color: #fff;
box-shadow: 0 1px 10px #ccc;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #ccc;
}
.name {
flex: 1;
text-align: center;
}
```
通过以上代码,即可实现一个悬浮的view,包括圆形头像和名字,都在view上左右居中。
阅读全文