详解mpvue开发微信小程序基础知识

wx.setStorage({
  key:"key",
  data:"value"
});

同样，微信小程序也提供了getStorage({})方法，用于获取对应key中存储的数据，其还有success、fail、complete三个回调函数，如:

wx.getStorage({
  key: "key",
  success (res) { // 成功获取到对应key中的数据
  },
  fail() { // 未成功获取到对应key中的数据
  },
  complete() { // 获取对应key数据结束，不管成功还是失败都会执行
  }
});

getStorage()和setStorage()方法本身是异步的，但是微信小程序提供了对应的同步方法，即getStorageSync(“key”)和setStorageSync(“key”, “value”);

⑪ 轮播图组件

微信小程序提供了一个<swiper>轮播图组件，其中只可放置swiper-item组件，swiper有一些常用的属性，如:

indicator-dots: 是否显示面板指示点;
autoplay: 是否自动切换;
interval: 设置自动切换时间间隔;
duration: 滑动动画时长;
circular: 是否循环播放;
indicator-active-color: 设置当前选中的指示点颜色;

<swiper :indicator-dots="indicatorDots"
    :autoplay="autoPlay"
    :interval="interval"
    :duration="duration"
    :circular="circular"
    indicator-active-color="rgba(255,255,255, 0.6)">
    <block v-for="(item, index) in imgUrls" :key="index">
      <swiper-item>
        <img :src="item" class="slide-item"/>
      </swiper-item>
    </block>
</swiper>

当然，<swiper>组件不仅仅能实现图片的轮播，还可以实现其他轮播，比如列表内容的轮播(导航和内容的联动)，我们不给其添加indicator-dots、autoplay、interval、duration、circular等属性，而是通过手进行滑动，swiper组件还有一个current属性，属性值为滑动块的索引值，用于显示对应的滑动item，从而实现导航和内容的联动，即点击导航，自动切换到对应内容。swiper组件也提供了change事件，当我们手动滑动滑动item的时候，就会触发change事件，可以在事件对象中拿到对应滑块的索引，从而更新导航位置，实现滑动内容，自动高亮导航位置。

⑫ 可滚动区域组件

微信提供了一个<scroll-view>可滚动区域组件，用于设置该区域中的内容是可以滚动的，通常用于实现可滚动的导航标签栏，其常用属性为:

scroll-x: 是否允许横向滚动;
scroll-y: 是否允许纵向滚动;
scroll-into-view: 属性值为对应滚动item的id，表示自动滚动到对应id元素位置;
scroll-with-animation: 在设置滚动条位置时使用动画过渡;

要实现点击某个滚动item后，自动滚动到对应滚动item位置，那么需要给每个滚动item添加一个id，然后动态改变scroll-into-view的值为对应的滚动item的id即可。