博客csdn微信小程序持续更新中（入门）swiper/menu/navigator

微信小程序（入门）

• swiper组件 轮播图

<swiper autoplay="true"//是否自动切换 
		indicator-dots="true" //是否显示面板指示点 
		indicator-color="#ccc" //指示点颜色
		indicator-active-color="#fff" //高亮时指示点颜色
		interval="2000"//自动切换时间间隔
		circular="true"//是否采用衔接滑动
		>
  <swiper-item>
    <image src="https://imgcps.jd.com/ling4/64125634276/576957uS5pyN54iG5qy-5Y-j56KR/5oOK5Zac5LiN5pat/p-5c11d16482acdd181dbc1fc5/460028ba/cr_1125x445_0_171/s1125x690/q70.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/101770/6/8300/99471/5e033390E1ed3b873/22d599208a3500b8.jpg!cr_1125x445_0_171!q70.jpg.dpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/100040/37/7870/152152/5e006952E3e9dab63/d02aaf2fdb526acf.jpg!cr_1125x445_0_171!q70.jpg.dpg"></image>
  </swiper-item>
</swiper>

img图片默认大小并不是全屏

swiper, swiper-item image {
  width: 100vw;
  height: 400rpx;
}

• menu组件 使用wx:for 最好绑定wx:key，绑定属性为不重复的字符串如：id

<view class="menu">
  <view class="menu_item" wx:for="{{lists}}" wx:key="id">//for循环数组
    <image src="{{item.icon}}"></image>
    <view>{{item.texts}}</view>
  </view>
</view>

data页面初始数据：
lists: [{
  	id:1,
    texts: "超市",
    icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png",
  },{
    id: 2,
    texts: "超市1",
    icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png",
  },{
    id: 3,
    texts: "超市2",
    icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png",
  },{
    id: 4,
    texts: "超市3",
    icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png",
  },{
    id: 5,
    texts: "超市",
    icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png",
  },{
    id: 6,
    texts: "超市1",
    icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png",
  },{
    id: 7,
    texts: "超市2",
    icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png",
  },{
    id: 8,
    texts: "超市3",
    icon: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png",
  }],

.menu {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.menu .menu_item {
  width: 25vw;
  height: 25vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.menu .menu_item image {
  width: 50%;
  height: 50%;
}

• navigator 页面跳转

//保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
<navigator url="../goodsdetail/index">详情页</navigator>
//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
<navigator open-type="switchTab" url="../luck/index">我的</navigator>

open-type  默认值：navigate   跳转方式：wx.navigateTo和wx.switchTab