微信小程序新手教程滚动视图(scroll-view)

时间：2017-01-06 16:38
来源：下载吧
编辑：xwgod

　　微信小程序新手教程滚动视图(scroll-view) ，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧

　　滚动视图(scroll-view)

　　scroll_view.js文件

  Page({    data:{      // text:"这是一个页面"    },    onLoad:function(options){      // 页面初始化 options为页面跳转所带来的参数    },    onReady:function(){      // 页面渲染完成    },    onShow:function(){      // 页面显示    },    onHide:function(){      // 页面隐藏    },    onUnload:function(){      // 页面关闭    }  })

　　来自CODE的代码片snippet_file_0.txt

　　scroll_view.json文件

{    "navigationBarTitleText":"scroll_view"}

　　来自CODE的代码片snippet_file_0.txt

　　scroll_view.wxml文件

<view class="title">垂直滚动</view><scroll-view class="scroll_view_vertical" scroll-y>    <view class="item">line1</view>    <view class="item">line2</view>    <view class="item">line3</view>    <view class="item">line4</view>    <view class="item">line5</view>    <view class="item">line6</view>    <view class="item">line7</view>    <view class="item">line8</view>    <view class="item">line9</view>    <view class="item">line10</view>    <view class="item">line11</view>    <view class="item">line12</view></scroll-view><view class="title">水平滚动</view><scroll-view class="scroll_view_horizotal" scroll-x>    <view >1111111111111111111111111111111111111111111111111111111111</view>    </scroll-view>

　　来自CODE的代码片snippet_file_0.txt

　　scroll_view.wxss文件

.title{    height: 30px;    text-align: center;}.scroll_view_vertical{    height: 50%;    margin-bottom: 20px;    background-color: ghostwhite;}.scroll_view_horizotal{    height: 50px;    background-color: whitesmoke;}.item{    height: 50px;}

　　目前微信小程序还没有正式上线，在这里小编先为大家介绍一个即将在1月9号和微信小程序一起上线的小程序－－嗨图!大家可以直接在这个微信小程序上DIY自己的照片，先来看看具体嗨图有些什么功能吧!

　　微信小程序嗨图功能