微信小程序-样式和组件（3）navigator/scroll-view组件

一.navigator组件

open-type属性介绍：
navigator组件实现小程序的跳转，如从商品图片跳转到详情页面。
navigator：保留当前页面，跳转到应用到某一个页面，但不能跳转到tabbar页面
redirect：关闭当前页面，跳转到应用到某一个页面，但不能跳转到tabbar页面
switch Tab：跳转到tabbar页面，并关闭其他非tabbar页面
reLaunch：关闭所有页面，打开到应用的某个页面
navigateBack：关闭当前页面，返回上一个页面或几个页面

  <navigator url="/pages/list/list" open-type="navigate">
    <image src="../../assets/nav1.png" />
    <text>鲜花玫瑰</text>
  </navigator>

url属性介绍：
传参使用&将参数进行拼接

/pages/list/list？id=1&name=test

二.scroll-view组件

实现小程序横向和纵向的滚动
横向滚动代码：
在.wxml文件里面创建scroll-view组件，并在里面放着三个view
scroll-x属性的值为ture，也可以只写属性scroll-x，默认值为true

<scroll-view class = "scroll-x" scroll-x="true">
<view>1</view>
<view>2</view>
<view>3</view>
</scroll-view>

在.scss文件里面渲染scroll-view，通过class选择器

.scroll-x{
  width: 100%;
  white-space: nowrap;
  background-color:skyblue;
  view{
    display: inline-flex;
    width: 300rpx;
    height: 80rpx;
    &:first-child{
      background:lightcoral;
    }
    &:last-child{
      background-color: lightgreen;
    }
  }

}

效果图：

同样纵向滚动的代码如下：

<scroll-view class = "scroll-y" scroll-y="true">
<view>1</view>
<view>2</view>
<view>3</view>
</scroll-view>

.scroll-y{
  height: 400rpx;
  background-color: skyblue;
  margin-top: 10rpx;
  view{
    height: 400rpx;
    &:first-child{
      background:lightcoral;
    }
    &:last-child{
      background-color: lightgreen;
    }
  }
}          

效果图：