【CSS】非常簡單的css實現div懸浮頁面底部 ----利用color ui 在uniapp中讓自定義tabbar 樣式固定在手機底部

利用color ui 在uniapp中讓自定義tabbar 樣式固定在手機底部

<div id="demo_div"></div>

<style>
    #demo_div{ 
　　　left: 0;
        position: fixed; 
        bottom: 0; 
        width: 100%; 
    } 
</style>                    

 只用css就實現了懸浮底部

 

轉載：https://www.cnblogs.com/BearLee/p/8109871.html

 

------------------------------------------------------color ui ---uniapp----------------------------------------------------------------------

 

 

 

 

<template>
    <view>
        <cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">操作條</block></cu-custom>
    
    
    <view class="botton-clas">
        <text>fdsfsdfsdfsd</text>
    </view>
      <view class="contnt-clas">
          發的范德薩發
        fdsfsdfsdfsdfsdf
      </view>
      <view class="contnt-clas">
          發的范德薩發
              fdsfsdfsdfsdfsdf
      </view>
        <view class="box">
            
            <view class="cu-bar tabbar bg-black">
                <view class="action text-green">
                    <view class="cuIcon-homefill"></view> 首頁
                </view>
                <view class="action text-gray">
                    <view class="cuIcon-similar"></view> 分類
                </view>
                <view class="action text-gray add-action">
                    <button class="cu-btn cuIcon-add bg-green shadow"></button>
                    發布
                </view>
                <view class="action text-gray">
                    <view class="cuIcon-cart">
                        <view class="cu-tag badge">99</view>
                    </view>
                    購物車
                </view>
                <view class="action text-gray">
                    <view class="cuIcon-my">
                        <view class="cu-tag badge"></view>
                    </view>
                    我的
                </view>
            </view>

        
        </view>

    

    

    
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                InputBottom: 0
            };
        },
        methods: {
            InputFocus(e) {
                this.InputBottom = e.detail.height
            },
            InputBlur(e) {
                this.InputBottom = 0
            }
        }
    }
</script>

<style>
    .box {
        left: 0;
                position: fixed; 
                bottom: 0; 
                width: 100%; 
    }
    .contnt-clas{
        width: 100%;
        height: 2000upx;
    }

    .box view.cu-bar {
        
    }
</style>