切换的时候报错

来源：11-11 首页动画效果和书架的实现（下）

楼上老王__

2017-02-27

写回答

2回答

就我皮

2018-07-23

我来回答下这个问题，是绑定样式的问题，老师的那种绑定样式会有些bug，包括源码如果你用谷歌浏览器打开也会输出报错。

我给你看一段我header 头的那个i的样式绑定方式吧：

<i :style="{width: index_header_tab_width + 'px', transitionDuration: header_duration + 's',transform: 'translate3d(' + header_position + 'px,0px,0px)' }"></i>

经过验证是OK的，可以正常显示。仔细看style的定义方式。

绑定样式有很多种，这只是其中一种。

具体参考这篇文章：

https://blog.csdn.net/zangqiqi/article/details/53839544

注：

类似font-size ， transition-duration ，的css样式属性，记得要用驼峰命名。

另外附上我书城首页代码作为对照，具体看style的动态样式绑定：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
        <link rel="stylesheet" type="text/css" href="/static/css/index.css">
        <title>书城首页</title>
    </head>
    <body>
        <div id="app" :style="width:{{ screen_width }}px;overflow:hidden">
            <% include include/header.html %>
            <div :style="width:{{ double_screen_width }}px;transition-duration:.5s;transform:translate3d({{ position }}px,0px,0px)">
                <div class="container-warp"
                :style="width:{{ screen_width }}px;float:left">
                    <div class="container-scroll" style="top:0px">
                        <% include include/index-top.html %>
                        <% include include/index-hot.html %>
                        <% include include/index-recommend.html %>
                        <% include include/index-female.html %>
                        <% include include/index-male.html %>
                        <% include include/index-free.html %>
                        <% include include/index-bottom.html %>
                    </div>
                </div>
                <div :style="width:{{ screen_width }}px;float:left;">
                    <% include include/index-shelf.html %>
                </div>
            </div>
        </div>
    </body>
    <script src="/static/script/vue.js"></script>
    <script src="/static/script/zepto.js"></script>
    <script src="/static/script/pages/index.js"></script>
</html>

就我皮

问题比较久远，供后面遇到的人参考

2018-07-23

共1条回复