mpvue小结

最近用美团的开源框架mpvue开发微信小程序，包容原生和vue语法的情况下，总结下项目中的一些小知识点。

Tips:

1.vue放冒泡事件 @click.stop

2.选择当前元素，出点击效果（背景色、字体色）

@click="click(item,index)"  设个当前选中currentIndex,不选中也可以然它值为空

绑定动态类名 :class="{'active' : currentIndex === index}"

当currentIndex == index时点击效果就出来了

3.小程序swiper组件，禁止手动滑动

我在项目中做的是tab栏的样式

如图，后来发现先滚动swiper，上面的tab栏并不关联

所以用catchTouchMove来阻止滑动

在swiper-item上绑定 catchTouchMove=“catchTouchMove”

方法里面： 

catchTouchMove（）{ return false}

这样就大功告成

4.刷选框的升级版

需求如图

上下箭头都是图片，点击变红色，加载相应的数据

用的思路比较笨，代码冗长，因为后面要用到，提取成了一个公共组件

这里布局用的ul包3个li

li里面的3个span标签分别是3个样式

1.两个黑色箭头 2.点击上箭头的效果 3.点击下箭头的效果

默认加载的数据未未选中状态，箭头都是黑色

举例：

1.当点击热门时，下箭头高亮的span标签显示，其他两个span隐藏，这个效果做成取反

再点击时热门是，上箭头高亮，隐藏其他，这个效果做成上一条的取反

同

理，评分价格一样的思路

mark1为未点击状态，show1为下箭头高亮，show2为上箭头高亮

代码如上

好了今天更到这里。。

后续再补充