微信小程序开发第三弹

1、页面内顶部栏目的制作
首先要知道，页面的顶部栏目和底部的tabBar是不一样的。tabBar是基于全局的，而页面的顶部栏目仅仅是在本页面中的。
思路：（1）循环展示
（2）每个navbar下面对应的有内容
（3）类似于选项卡那种的，需要给每个navbar一个标识，来确定当前选中的是哪个栏目，同时赋予它与众不同的样式。
wxml代码：

<view class="navbar">  
  <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>  
</view>

<!--战士-->  
<view class="navbar_son" hidden="{{currentTab!==0}}">  
   <text>我是战士</text>
</view>  

<!--法师-->  
<view class="navbar_son" hidden="{{currentTab!==1}}">  
   <text>我是法师</text>
</view>  

<!--坦克-->  
<view class="navbar_son" hidden="{{currentTab!==2}}">  
    <text>我是坦克</text>
</view>  

<!--ADC-->  
<view class="navbar_son" hidden="{{currentTab!==3}}">  
  <text>我是ADC</text>
</view>  

解释：
1、wx:for=”{{navbar}}” 意思是虚幻navbar的数组数据
2、{{item}} 这里面是navbar数组里面的值，如战士、法师等值
3、wx:key=”unique” 来指定列表中项目的唯一的标识符
4、data-idx=”{{index}}” 存储一些数据供home.js里调用，这里data-xxx，xxx就是你给test.js里提供的数据关键词，test.js通过获取xxx关键词来获取xxx里面的数据
5、选项卡的内容部分主要是通过currentTab 的值来进行区分。采用的是css的hidden属性
2、js代码：实现的重点部分：
data: {
navbar : [‘战士’,’法师’,’坦克’,’ADC’],
currentTab: 0,
}，
navbarTap:function(e){
console.debug(e);
this.setData({
currentTab : e.currentTarget.dataset.idx
})
},
解释：
1、首先在data数据中定义这几个顶部栏目的值
2、初始的currentTab是0
3、然后通过绑定的点击事件，赋予currentTab不同的值，从而显示不同的内容；
3、wxss部分：
.navbar{
flex: none;
display: flex;
background: #fff;
}
.navbar .item{
position: relative;
flex: auto;
text-align: center;
line-height: 80rpx;
font-size:14px;
}
/* 顶部导航字体颜色 */
.navbar .item.active{
color: #f0145a;
}
/* 顶部指示条属性 */
.navbar .item.active:after{
content: “”;
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 6rpx;
background: #f0145a;
}

页面效果：

2、轮播图的制作
页面效果：

swiper 是微信自带的视图，我们直接使用就好，记住 里面一定要包含 ，你用自定义的 view 是无效的，下面介绍一下这个控件的常用属性，
● indicator-dots 是否显示面板指示点
● autoplay 是否自动切换
● interval 自动切换时间间隔
● duration 滑动动画时长
wxml代码：


<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" />
</swiper-item>
</block>
</swiper>

样式表：(定义高度和宽度)
swiper {
height: 300rpx;
}
swiper-item image {
width: 100%;
height: 100%;
}
JS文件：
需要截图
imgUrls: [
‘http://pzsh.oss-cn-shanghai.aliyuncs.com/red/2017-08-11-12-16-09-598d2f89ae9dc.jpg‘,
‘http://pzsh.oss-cn-shanghai.aliyuncs.com/goods/2017-08-01-14-00-31-598018ffa7031.png‘,
‘http://pzsh.oss-cn-shanghai.aliyuncs.com/red/2017-08-11-12-16-09-598d2f89ae9dc.jpg’
],
indicatorDots: true, //是否显示面板指示点
autoplay: true, //是否自动切换
interval: 3000, //自动切换时间间隔,3s
duration: 1000, // 滑动动画时长1s
},
这边需要注意两个问题：
1、 swiper 千万不要在外面 加上任何标签 例如 之类的 ，如果加了可能会导致轮播图出不来
2、imgUrls在js文件要放到data里面，代表的是数据的一部分。放到其他部分是显示不出来的。
3、图片路径要写好。可以是本地文件，也可以是全路径文件

好吧，这个编辑器我还是用不6，这排版，我自己都醉了，，下次准备换回最原始的编辑器了，，哭