微信小程序--swiper中current问题

2019/2/22

indexwxml文件

indexjs文件

数组 imageArr 动态的改变数组的数量，

例如：当 imageArr 中的长度为4，轮播滚动到 3 ，current=3；此时swiper没有绑定current，并将 imageArr 的长度动态改为2，这会出现current还是3，导致swiper不显示的问题。

解决：

indexwxml 中在swiper中绑定current

indexjs 中增加current

目前，母婴零售市场主要有四种模式：实体店或专营店、商场中的母婴商品专区、超市中的母婴专区和线上销售。由于电商行业的介入，消费者观念的成熟，以往传统产品营销模式已然行不通;但交易过程简单化，面临竞争加剧的的线上母婴销售一样存在最大壁垒，则是无法提供母婴实体店独有的体验和专业服务。

随着婴幼儿市场主力消费人群逐渐转变，母婴行业进入新时代，传统实体店以及纯粹的电商都难以满足消费者的需求。所以，线上线下零售以及内容平台相结合成为母婴市场发展的新方向。线上需要提供实体店的体验和服务来实现客户的黏度与忠诚度;线下同样需要通过线上的手段来打开更多的入口“引流”。线上和线下一站式购买与体验式消费，成为孕婴童消费日益重要的渠道，并有助于提高客户黏性。

随着互联网的高速发展，尤其是微信小程序的推出，母婴行业开发微信小程序便成了其发展的一种重要手段，也成了其转型的一个契机。

不管是哪个行业的店铺，营销都主要解决三件事：拉新客、留老客、做促销。可茫茫人海中谁是新客户呢？客户的二次唤醒工作又该如何做呢？使用小程序，则可以有效地解决上述问题。

1、进入母婴小程序：轮播海报助力视觉冲击，展示最新的母婴产品优惠活动，引导用户产生购买冲动领取优惠券，优惠券是促销方式之一，主要是让顾客需享受到母婴产品或服务的优惠，促进客户购买欲

2、评价推介:可以添加客户的点评功能，通过用户的反馈来提高信任和认可。实现口碑传播，达到裂变式推广效果。

3、优惠买单：可以满足顾客在线下购买在线上买单的需求，对于顾客多了一个买单的途径，同时又可以享受优惠，大大提升了顾客的消费体验，增加了与客户的粘性。

4、在线客服:问题是很好的互动介质，成功将顾客的身份从“浏览者”转变为“参与者”，提升了到店概率。

5、会员管理：与线下会员制管理相同，线上会员管理也不容忽视，做好会员维护才算真正拥有了会员。

6、妈妈圈：主要提供相关的母婴资讯，对于婴儿成长中常见的问题进行整合并详细剖析，与妈妈们分享相关的婴儿知识，并设置了互动区，

7、会员卡领取:现在人们很反感工作人员反复提醒开卡办会员。线上会员办理则避开这一缺点，将会员办理的主动权交到了顾客手中。小程序会员卡有积分赠送、优惠券领取等活动，引导散客降低防备心理自发成为会员。这一步也使商家拥有了顾客手机号，让后期营销活动容易进行。

8、营业信息:小程序采用腾讯地图，以门店位置信息为终点，顾客只需点击位置信息就可以开始导航。当然，营业时间也必不可少，以免顾客在歇业时间到店体验变差。

9、产品介绍：大卖场聚集了品类齐全的婴幼儿产品，并根据不同属性进行了详细的分类，方便用户可以快速找到自己需要的产品，满足用户的个性化需求，提高用户体验。

通过母婴行业小程序提供相关的母婴资讯，对于婴儿成长中常见的问题进行整合并详细剖析，与妈妈们分享相关的婴儿知识，母婴行业小程序还设置了互动区，妈妈们可以发起任何话题并在评论区进行评论交流，以便解决妈妈们在照顾孩子的过程中遇到的问题。同时商家可以根据母婴行业小程序后台数据妈妈们的交流内容分析她们感兴趣的版块，更精准的推送相关信息内容，培养用户忠诚度

让附近5公里以内的用户发现你的店，无形之中零成本的营销你的店铺。相比以前发传单，打广告等省时省力多了。随着小程序的广泛被接纳，使用小程序找线下门店的用户会越来越多，让你获利于无形。

随着小程序入口的不断开放，功能的不断升级，腾讯必将打造微信版淘宝/天猫。如今小程序的应用越来越广泛，在各个行业的应用也越来越多，母婴零售企业开发微信小程序已经成为趋势。

    实现轮播功能且高度要自适应。

    使用小程序自带组件swiper。

     关键点 ：就是要计算出当前的高度并赋值给swiper高度。需要计算是由于swiper必须指定高度不能像div一样自动撑开。

    难点：

    1、问题：切换页面返回 由onhide—>onshow时，出现所有的高度会保持在最后计算出的那个值，导致高度自适应效果失效。

         原因：是由于此时imageLoad不再监听。

         解决办法：watch列表，给url加参数（时间戳），使其每次都重新加载，使imageLoad监听。

    2、问题：切换到后台再返回到前台时，初始高度会保持出现在第一张的高度，若切换时非第一张，就会导致给当前高度不正确，被遮挡或者有大片空白。

         原因：给swiper赋值的是 列表里第一张的高度。

         解决办法：后台切回前台时，appdata是保持不变的，而当前排位已被保存变量，所以取当前的高度赋值给swiper高度。

    3、问题：此组件所在页面，下面有跳转到当前页的业务需要，只是渲染数据不同。当返回前一个页面时，初始高度还保留着返回前最后一次的高度，与当前页当前高度不符。

         原因：同页面切换时，appdata没有重新赋值的话就不会变化，最后当前变量取值了最后出现的那个页面的当前。

        解决办法：每切换到一个页面时，在组件里，缓存以页面数:当前为键值的currents对象。返回到某个页面时，通过当前页面数取得当前，从而获得当前初始高度。

PS ： 在设计和解决这些难点时，均遵循着组件的高内聚、低耦合原则，使得更具复用性、稳定性、无依赖。

ps：很多时候开始发现是未解的，待解决之后发现原来并没什么，