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


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

    效果:

  • 相关阅读:
    javascript小括号、中括号、大括号学习总结
    第二次面试
    Python 类编码风格
    Python常见初级错误
    2.傅里叶变换
    1.仿射变换
    Leetcode 136. 只出现一次的数字
    003 Python与类C语言的区别(未完)
    01 C++ 多线程入门实例
    Leetcode 503. 下一个更大元素 II
  • 原文地址:https://www.cnblogs.com/luo1240465012/p/14200113.html
Copyright © 2020-2023  润新知