微信小程序学习随笔

scroll-view与view

要做出滚动视图的效果

<scroll-view>
    <view id="1">11</view>
    <view id="2">22</view>
    <view id="3">33</view>
</scroll-view>

在wxss中对scroll-view使用 white-space:nowrap，对view使用display:inline-block

让view中的内容水平居中和竖直居中

例子如下

<view class="box">
  我要水平竖直居中
</view>

wxss设置如下达到水平居中和竖直居中效果

display: flex;
justify-content: center;
align-items: center;

轮播器设置

下面是使用了两张图片进行轮播的轮播器

<view style="margin-top: 20rpx;" class="banner">
  <swiper previous-margin="55rpx" circular="{{true}}" autoplay="{{true}}" indicator-dots>    
    <swiper-item>
      <image src="../../static/image/123.jpg" mode=""/>
    </swiper-item>
    <swiper-item>
      <image src="../../static/image/QQ图片20220320171846.jpg" mode=""/>
    </swiper-item>
  </swiper>
</view>

需要注意的是，设置轮播器里的图片的高度必须通过css设置swiper的高度才可以改变``

使用navigator进行路由传参

?号后面写需要传递的参数，如果有多个参数，用&隔开,可以使用 {{}} 获取变量的值进行传递

<navigator url="/page/test/test?name=zyp&title={{item.xxx}} class= "mynavigator">跳转到新页面</navigator>

对于另一个页面，则在onLoad(option){}接收到传递的参数

onLoad(option){
  console.log(option.name);
  console.log(option.title);
}