美文网首页简友广场
uni-app框架注意事项

uni-app框架注意事项

作者: 前端来入坑 | 来源:发表于2018-12-28 20:08 被阅读365次

    upx2px

    动态绑定的 style 不支持直接使用 upx

    <!-- - 静态upx赋值生效 -->
    <view class="test" style="width:200upx"></view>
    <!-- - 动态绑定不生效 -->
    <view class="test" :style="{width:winWidth + 'upx;'}"></view>
    

    使用 uni.upx2px(Number) 转换为 px 后再赋值。

    <template>
        <view>
            <view class="half-width" :style="{width: halfWidth}">
                半屏宽度
            </view>
        </view>
    </template>
    
    <script>
        export default {
            computed: {
                halfWidth() {
                    return uni.upx2px(750 / 2) + 'px';
                }
            }
        }
    </script>
    <style>
        .half-width {
            background-color: #FF3333;
        }
    </style>
    

    样式导入

    使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

    示例代码:

    <style>
        @import "../../common/uni.css";
    
        .uni-card {
            box-shadow: none;
        }
    </style>
    

    相关文章

      网友评论

        本文标题:uni-app框架注意事项

        本文链接:https://www.haomeiwen.com/subject/rwlykqtx.html