小程序学习01->view与scroll-view 小程序

- view
view是最常用也是最简单的的视图窗口组件，相当于HTML页面同的
标签。
下面来实战一下使用view。
1、在app.json下添加view页面。

文章图片
view与scroll-view_第1张图片" title="" width="402" height="230" style="border:1px solid black; ">
添加后按ctrl+s，微信开发工具会自动生成页面。

文章图片
view与scroll-view_第2张图片" title="" width="305" height="314" style="border:1px solid black; ">
2、编写view.wxml页面

1 2

上述代码中用到了bgView这个css样式，可在view.wxss中添加

/* pages/view/view.wxss */ .bgView{ padding: 40px; height: 10px; width: 10px; margin-top: 20px; margin-left: 50px; background: blue }

3、写好后保存，然后切换index.wxml中添加个跳转按钮过来就可以了。

文章图片
view与scroll-view_第3张图片" title="" width="481" height="245" style="border:1px solid black; ">
4、添加按钮后，还需要在index.js中编写跳转代码。

文章图片
view与scroll-view_第4张图片" title="" width="533" height="327" style="border:1px solid black; ">
view效果：

文章图片
view与scroll-view_第5张图片" title="" width="388" height="429" style="border:1px solid black; ">
- scroll-view
scroll-view 用于滚动视图，scroll-view有横向滚动和竖向滚动之分。使用竖向滚动时，需要给一个固定的高度，通过WXSS设置height。
scroll-view属性及说明如下图：