Question

我是网络开发的新手，我在这里使用来自https://github.com/TheSeamau5/swipe-pages

的滑动页面来阻止路障

基本上，我想制作一个＆＃34;滑动图像＆＃34;超出＆＃34;刷卡页面＆＃34;通过在滑动页面的内容中放置一个模板。换句话说，我想将一个字符串数组（图像的位置）作为属性传递给polymer-element，并且元素中的滑动页面应该自动生成带有图像的滑动页面。

我尽可能地避免使用java脚本并利用聚合物绑定。我甚至将模板扩展为滑动页面。

这是目前为止的代码，它不能按预期工作。这种方法是正确的还是我应该为刷卡图像重新创建滑动页面。但是，模板绑定应该可以工作！

<link rel="import" href="../swipe-pages-master/swipe-pages.html">
<link rel="import" href="../swipe-pages-master/swipe-page.html">

<polymer-element name="lesson-card-mini" attributes="items">
            <template>
                <style>
                    :host {
                        display: block;
                        position: relative;
                        padding: 0px;
                        width: 100%;
                    }
                    .content2 {
                        padding: 2px;
                        border: 1px solid #dedede;
                        border-top: none;
                        border-bottom-left-radius: 5px;
                        border-bottom-right-radius: 5px;
                        background: black;
                    }
                </style>

                <div class="content2" style="width: auto; height: auto;"> 
                    <swipe-pages id="pgs" style="color: white;">
                        <template extends="swipe-page" repeat="{{item in items}}">               
                               <img src="{{item}}" style="width: 20px; height 20px"/>           
                        </template>
                    </swipe-pages>  
                </div>  

            </template>
            <script>
                Polymer('lesson-card-mini',
                        {
                            created: function() {

                            },
                            ready: function() {

                            },
                            toggle: function() {

                            }
                        });

            </script>
        </polymer-element>

    <polymer-element name="select-main">
        <template>
            <style>

            </style>

            <div vertical layout center center-justified>

                <lesson-card-mini style="width: 100%; height: 500px;"
                                  items="['../images/01.png',
                                                     '../images/02.png',
                                                     '../images/03.png']"></lesson-card-mini>
            </div>

        </template>
        <script>

            Polymer('select-main',
            {

            });

        </script>
    </polymer-element>

有没有人有这样的示例代码？

Answer 1

我如上所述进行了更改，我的代码正常运行。事实证明我没有在polymer-element构造函数中初始化数组（属性），这非常重要。

以下代码有效，..........现在我有一个“图像滑动”。

<link rel="import" href="../swipe-pages-master/swipe-pages.html">
<link rel="import" href="../swipe-pages-master/swipe-page.html">

<polymer-element name="lesson-card-mini" attributes="imglinks">
            <template>
                <style>
                    :host {
                        display: block;
                        position: relative;
                        padding: 0px;
                        width: 100%;
                    }
                    .content2 {
                        padding: 2px;
                        border: 1px solid #dedede;
                        border-top: none;
                        border-bottom-left-radius: 5px;
                        border-bottom-right-radius: 5px;
                        background: black;
                    }
                </style>

                <div class="content2" style="width: auto; height: auto;"> 
                    <swipe-pages id="pgs" style="color: white;">
                        <template repeat="{{imglink in imglinks}}"> 
                            <swipe-page>
                                <img src="{{imglink}}" style="width: 20px; height: 20px"/>  
                            </swipe-page>          
                        </template>
                    </swipe-pages>
                </div>  

            </template>
            <script>
                Polymer('lesson-card-mini',
                        {
                            created: function() {
                                this.imglinks = []; // This line is important
                            },
                            ready: function() {

                            },
                            toggle: function() {

                            }
                        });

            </script>
        </polymer-element>

    <polymer-element name="select-main">
        <template>
            <style>

            </style>

            <div vertical layout center center-justified>

                <lesson-card-mini style="width: 100%; height: 500px;"
                                  imglinks="['../images/01.png',
                                                     '../images/02.png',
                                                     '../images/03.png']"></lesson-card-mini>
            </div>

        </template>
        <script>

            Polymer('select-main',
            {

            });

        </script>
    </polymer-element>

有了这个，我可以让页面上面有一个字符串数组。也许改进是让页面通过具有模板选择器来解密显示图像，视频，PDF文件，文本文件等的链接。如果由自动动画支持，也可以成为图像轮播和滑块。

谢谢，希望这会有所帮助！

属性绑定到滑动页面中的聚合物模板

1 个答案: