- view
view是最常用也是最简单的的视图窗口组件,相当于HTML页面同的
标签。
下面来实战一下使用view。
1、在app.json下添加view页面。
下面来实战一下使用view。
1、在app.json下添加view页面。
添加后按ctrl+s,微信开发工具会自动生成页面。
2、编写view.wxml页面
<!--pages/view/view.wxml-->
<view class="bgView">
1
</view>
<view class="bgView">
2
</view>
上述代码中用到了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中添加个跳转按钮过来就可以了。
4、添加按钮后,还需要在index.js中编写跳转代码。
view效果:
- scroll-view
scroll-view 用于滚动视图,scroll-view有横向滚动和竖向滚动之分。使用竖向滚动时,需要给一个固定的高度,通过WXSS设置height。
scroll-view属性及说明如下图:
在view中加入scroll-view滚动。
<scroll-view scroll-y="true" style="heigth:200px;"
bindscrolltoupper="upper"
bindscrolltolower="lower"
bindscroll="scroll"
scroll-into-view="red"
scroll-top="50">
<view class="bgViewBlue" id="blue">
1
</view>
<view class="bgViewRed" id="red">
2
</view>
<view class="bgViewYellow" id="yellow">
3
</view>
<view class="bgViewYellow" id="yellow">
3
</view>
<view class="bgViewYellow" id="yellow">
3
</view>
<view class="bgViewYellow" id="yellow">
3
</view>
<view class="bgViewYellow" id="yellow">
3
</view>
</scroll-view>
效果图: