微信小程序 添加左边固定浮动框

view:

复制代码
            <!-- 悬浮框 -->
            <view class="v-fixed-title1">
                <view class="v-fixed-ic">
                    <uni-icons size="6" class="v-fixed-icon" type="chatbubble" color="#ffffff">
                    </uni-icons>

                    <uni-icons size="3" class="v-fixed-icon" type="closeempty" color="#ffffff">
                    </uni-icons>
                </view>
                <view class="v-fixed-text">参会人</view>
            </view>
            <view class="v-fixed-title2">
                <view class="v-fixed-ic">
                    <uni-icons size="6" class="v-fixed-icon" type="compose" color="#ffffff">
                    </uni-icons>
                    <uni-icons size="3" class="v-fixed-icon" type="closeempty" color="#ffffff">
                    </uni-icons>
                </view>
                <view class="v-fixed-text">&nbsp;&nbsp;</view>
            </view>
复制代码

css:

复制代码
    .v-fixed-title1 {
        position: fixed;
        top: 30%;
        left: 15rpx;
        width: 130rpx;
        border-radius: 15rpx;
        display: flex;
        flex-direction: column;
        background-color: #8B3E2F;
        padding-left: 15rpx;
    }

    .v-fixed-title2 {
        position: fixed;
        top: 43%;
        left: 15rpx;
        display: flex;
        padding-left: 15rpx;
        border-radius: 15rpx;
        width: 130rpx;
        /*设置容器内部容器的排列方向*/
        flex-direction: column;
        background-color: #8B3E2F;
    }

    .v-fixed-ic {
        display: flex;
        flex-direction: row;
    }

    .v-fixed-text {
        font-size: 28rpx;
        color: #FFFFFF;
    }
复制代码

效果:

 

posted @   凉面好好吃  阅读(1030)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示