微信小程序，轮播图+菜单案例

今天要讲的是微信小程序轮播图+菜单案例。如上图所示就是今天要做成的样子。

<!--index.wxml-->
<view class="container">

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for-items="{{banner_list[0].banner}}">
    <swiper-item>
      <image src="{{item.pic_url}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>

 <view>
  <view class='menueview' >
   <block wx:for-items="{{banner_list[1].banner}}">
   <image src="{{item.pic_url}}" class="menue-image" />
   </block>
  </view>
 </view>
 <view class='separator'></view>
 
<view class='floortitle'>
  <view class='floortitlemoreicon'>热卖商品</view>
  <view class='floortitlemoretext'>更多> </view>
</view>

<view class='hotgoodcontainer'>
  <view class='gooditem' wx:for="{{hotgoods}}" wx:for-index="idx" wx:for-item="good">
    <view class='imgview'>
      <image class='productimg' src='{{good.pic_url}}'/>
    </view>
    <view>{{good.name}}</view>
  </view>
<view>
</view>

我们直接看代码里面的内容，上面的代码是它页面的ui布局。每一段我都分好行了，也比较容易看懂。swiper写的就是我们的轮播图，然后menueview就是我们的菜单栏，再然后floortitle就会我们的更多，最后hotgoodcontainer写的是热卖内容。

	Page({
	  data: {
		motto: 'MiHome_Store',
		userInfo: {},
		indicatorDots: true,
		autoplay: true,
		interval: 3000,
		duration: 100,
		"banner_list": [
		  {
			"banner": [
			  {
				"pic_url": "xxx",
			  },
			  {
				"pic_url": "xxx",
			  },
			  {
				"pic_url": "xxx",
			 },
			  {
				"pic_url": "xxx",
			  },
			  {
				"pic_url": "xxx",
			  }
			]
		  },
		  {
			"banner": [
			  {
				"pic_url": "xxx",
			  },
			  {
				"pic_url": "xxx",
			  },
			  {
				"pic_url": "xxx",
			  },
			  {
				"pic_url": "xxx",
			  }
			]
		  }
		],
		hotgoods: [
		  {
			"name": "90分轻薄羽绒服",
			"summary": "防钻绒工艺,保暖更锁温,备好深秋暖意",
			"ext_tag": "xxx",
			"pic_url": "xxx",
		  },
		  {
			"name": "红米Note 3",
			"summary": "金属机身,指纹解锁,4000mAh大电池",
			"ext_tag": "http://static.home.mi.com/app/shop/img?id=shop_d65477ca8db6626da323554e132d7de9.png&w=420&h=240&crop=a_0_120_1080_480&t=png",
			"ext_tag": "xxx",
			"pic_url": "xxx",
		  },
		  {
			"name": "小米手机5",
			"summary": "骁龙820处理器,4轴防抖相机",
			"ext_tag": "xxx",
			"pic_url": "xxx",
		  },
		  {
			"name": "小米Max",
			"summary": "6.44寸大屏黄金尺寸,买赠智能显示保护套",
			"ext_tag": "xxx",
			"pic_url": "xxx",
		  },
		  {
			"name": "最生活毛巾",
			"summary": "精选阿瓦提长绒棉,瑞典抗菌科技,3条/包",
			"ext_tag": "xxx",
			"pic_url": "xxx",
		  },
		  {
			"name": "小米空气净化器 2",
			"summary": "全新空气增压系统,净化性能高达 310m³/h",
			"ext_tag": "xxx",
			"pic_url": "xxx",
		  }
		]
	  },

最后写的是我们的页面数据，当然你也可以单独写成配置文件。上面的xxx是写你自己的具体图片网址。因为微信小程序包是限制大小的，所以尽量不要直接放图片在里面，所以放在别的地方存储，然后留下url连接就可以读取。

总的来说并不需要多复杂就能写出一份页面好看的小程序。想要学习微信小程序的可以关注公众号：诗一样的代码，一起探讨一下。