{
  "styles": {
    "title": {
      "font-style": "bold",
      "font-size": 15,
      "padding-top": 15,
      "padding-left": 10,
      "color": "#666",
      "background-color": "#ddd"
    },
    "subtitle": {
      "lines": 0,
      "font-size": 13,
      "padding-bottom": 4,
      "padding-left": 10,
      "color": "#999",
      "background-color": "#ddd"
    },
    "button": {
      "font-size": 15,
      "background-color": "#eee",
      "height": 36,
      "alignment": "center",
      "color": "blue"
    }
  },
  "controller": "MistScrollTemplateController",
  "layout": {
    "style": {
      "direction": "vertical"
    },
    "children": [
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "水平方向滚动"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "Scroll Node 的尺寸不会根据里面的内容自动计算，所以记得给它设置尺寸。"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "vars": {
              "images": [
                "http://www.33lc.com/article/UploadPic/2012-7/201272515473155222.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/201272515473922882.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/201272515474686564.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/20127251548461109.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/20127251548926546.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/201272515481887125.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/201272515482310415.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/201272515482950345.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/201272515483443939.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/201272515484078937.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/201272515485267642.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/201272515485881788.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/20127251549411956.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/201272515491045799.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/201272515491657950.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/201272515492934843.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/201272515493858026.jpg",
                "http://www.33lc.com/article/UploadPic/2012-7/201272515494613942.jpg"
              ]
            },
            "type": "scroll",
            "style": {
              "clip": true,
              "height": 60,
              "padding-left": 5,
              "padding-right": 5,
              "spacing": 5,
              "align-items": "center"
            },
            "children": [
              {
                "repeat": "${images.count}",
                "type": "image",
                "style": {
                  "backing-view": "MistDemoImageView",
                  "width": 50,
                  "height": 50,
                  "corner-radius": 25,
                  "border-color": "#ccc",
                  "border-width": 2,
                  "image": "mist.bundle/default",
                  "image-url": "${images[_index_]}?${state.refresh ? random() : nil}",
                  "clip": true,
                  "content-mode": "scale-aspect-fill"
                }
              }
            ]
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "竖直方向滚动"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": ""
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "vars": {
              "tags": ["<a>", "<abbr>", "<acronym>", "<address>", "<applet>", "<area>", "<article>", "<aside>", "<audio>", "<b>", "<base>", "<basefont>", "<bdi>", "<bdo>", "<big>", "<blockquote>", "<body>", "<br>", "<button>", "<canvas>", "<caption>", "<center>", "<cite>", "<code>", "<col>", "<colgroup>", "<command>", "<datalist>", "<dd>", "<del>", "<details>", "<dfn>", "<dialog>", "<dir>", "<div>", "<dl>", "<dt>", "<em>", "<embed>", "<fieldset>", "<figcaption>", "<figure>", "<font>", "<footer>", "<form>", "<frame>", "<frameset>", "<h1> - <h6>", "<head>", "<header>", "<hr>", "<html>", "<i>", "<iframe>", "<img>", "<input>", "<ins>", "<kbd>", "<keygen>", "<label>", "<legend>", "<li>", "<link>", "<main>", "<map>", "<mark>", "<menu>", "<menuitem>", "<meta>", "<meter>", "<nav>", "<noframes>", "<noscript>", "<object>", "<ol>", "<optgroup>", "<option>", "<output>", "<p>", "<param>", "<pre>", "<progress>", "<q>", "<rp>", "<rt>", "<ruby>", "<s>", "<samp>", "<script>", "<section>", "<select>", "<small>", "<source>", "<span>", "<strike>", "<strong>", "<style>", "<sub>", "<summary>", "<sup>", "<table>", "<tbody>", "<td>", "<textarea>", "<tfoot>", "<th>", "<thead>", "<time>", "<title>", "<tr>", "<track>", "<tt>", "<u>", "<ul>", "<var>", "<video>", "<wbr>"]
            },
            "type": "scroll",
            "tag": 1,
            "style": {
              "clip": true,
              "wrap": true,
              "scroll-direction": "vertical",
              "height": 100,
              "padding": 5,
              "spacing": 5,
              "line-spacing": 5
            },
            "children": [
              {
                "repeat": "${tags.count}",
                "type": "text",
                "style": {
                  "text": "${tags[_index_]}",
                  "padding": 4,
                  "corner-radius": 3,
                  "clip": true,
                  "color": "white",
                  "background-color": "#E24810"
                }
              }
            ]
          },
          {
            "type": "text",
            "class": "button",
            "style": {
              "text": "Scrolls To Top"
            },
            "on-tap": {
              "scrollsToTop": ""
            }
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "两个方向滚动"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "尝试拖动下面的图片"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "scroll",
            "style": {
              "clip": true,
              "scroll-direction": "both",
              "height": 240
            },
            "children": [
              {
                "type": "image",
                "style": {
                  "backing-view": "MistDemoImageView",
                  "width": 640,
                  "height": 360,
                  "image-url": "http://www.33lc.com/article/UploadPic/2012-7/201272515473155222.jpg"
                }
              }
            ]
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "整页滚动"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": ""
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "scroll",
            "style": {
              "height": 200,
              "paging": true
            },
            "children": [
              {
                "repeat": 5,
                "type": "text",
                "style": {
                  "width": "${_width_}",
                  "text": "Page ${_index_+ 1}",
                  "alignment": "center",
                  "font-size": 40
                }
              }
            ]
          }
        ]
      },
      {
        "style": {
          "height": "1px",
          "background-color": "#888"
        }
      }
    ]
  }
}