{
  "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"
    }
  },
  "layout": {
    "style": {
      "direction": "vertical"
    },
    "children": [
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "image-url"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "网络图片地址。可以使用 <b>image</b> 和 <b>error-image</b> 来设置加载图片和默认图片。"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "vars": {
              "images": [
                "http://www.33lc.com/article/UploadPic/2012-7/201272515473155222.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488383216852&di=bbbe05b55d51cc2ce1e523efc3991407&imgtype=0&src=http%3A%2F%2Fwww.3gifs.com%2Fs%2F0%2F1d%2F01dzi.gif",
                "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": {
              "height": 100,
              "spacing": "1px"
            },
            "children": [
              {
                "repeat": "${images.count}",
                "type": "image",
                "style": {
                  "backing-view": "MistDemoImageView",
                  "margin": "auto",
                  "width": 100,
                  "height": 100,
                  "image": "mist.bundle/default",
                  "image-url": "${images[_index_]}?${state.refresh ? random() : nil}",
                  "clip": true,
                  "content-mode": "scale-aspect-fill"
                }
              }
            ]
          },
          {
            "type": "text",
            "class": "button",
            "style": {
              "text": "重新下载"
            },
            "on-tap": {
              "updateState:": { "refresh": true }
            }
          }
        ]
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "type": "text",
            "class": "title",
            "style": {
              "text": "content-mode"
            }
          },
          {
            "type": "text",
            "class": "subtitle",
            "style": {
              "html-text": "图片填充模式。默认为 <i>scale-to-fill</i>。"
            }
          },
          {
            "style": {
              "height": "1px",
              "background-color": "#888"
            }
          },
          {
            "style": {
              "direction": "vertical",
              "background-color": "#e5e5e5"
            },
            "vars": [
              {
                "values": ["scale-to-fill", "scale-aspect-fill", "scale-aspect-fit", "top-left", "top", "top-right", "left", "center", "right", "bottom-left", "bottom", "bottom-right"],
                "imageSize": "${(_width_ - 1) / 2}"
              }
            ],
            "children": [
              {
                "style": {
                  "wrap": true,
                  "spacing": 1,
                  "line-spacing": 1
                },
                "children": [
                  {
                    "repeat": "${values.count}",
                    "type": "text",
                    "class": "button",
                    "style": {
                      "width": "33%",
                      "text": "${values[_index_]}",
                      "background-color": "${_index_ == state.selected ? '#ccc' : '#eee'}"
                    },
                    "on-tap": {
                      "updateState:": { "selected": "${_index_}" }
                    }
                  }
                ]
              },
              {
                "style": {
                  "spacing": 1
                },
                "children": [
                  {
                    "repeat": 2,
                    "type": "image",
                    "style": {
                      "clip": true,
                      "width": "${imageSize}",
                      "height": "${imageSize}",
                      "image": "mist.bundle/pic${_index_ + 1}.jpg",
                      "content-mode": "${values[state.selected]}",
                      "background-color": "white"
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "style": {
          "height": "1px",
          "background-color": "#888"
        }
      }
    ]
  }
}