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

微信小程序新手教程滚动视图(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自己的照片，先来看看具体嗨图有些什么功能吧!

微信小程序嗨图功能

1、专题——DIY图片的模板，点击可以生成使用，分享到朋友圈。

2、分享墙——用户上传的自己DIY作品。

3、立即制作——可以用自己的图来DIY。

4、告诉我——告诉产品的改进，内容的增加。

想要体验怎么制作属于自己个性朋友圈照片的用户，等1月9号微信小程序上线后，扫一扫下面的二维码就可以啦!还等什么，赶紧扫码体验，开启你的嗨图之旅吧!

转载请注明：范的资源库 » 微信小程序新手教程滚动视图(scroll-view)