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

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;
         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;
         130rpx;
        /*设置容器内部容器的排列方向*/
        flex-direction: column;
        background-color: #8B3E2F;
    }

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

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

效果:

原文地址:https://www.cnblogs.com/luo1240465012/p/14200113.html