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


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;
    }

效果:

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM