微信小程序左右滑动切换图片酷炫效果(附效果)

开门见山,先上效果吧!感觉可以的用的上的再往下看。

心动吗?那就继续往下看!  先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了。

 1  <scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{windowHeight}}px" bindscroll="getSelectItem">
 2     <block wx:for="{{proList}}"  wx:key="unique" wx:for-index="id" wx:for-item="item">
 3       <view class="scroll_item {{item.selected ? 'selected' : ''}}" data-index='{{item.index}}' bindtap='selectProItem'>
 4       <view class='proImg'><image src="{{item.proUrl}}" class="slide-image"  mode="widthFix"/></view>
 5         <view class='detailBox'>
 6             <view class='proTitle'>{{item.proTitle}}</view>
 7             <view class='proDec'>{{item.proDec}}</view>
 8             <view class='proPrice'>¥{{item.proPrice}}</view>
 9             <navigator class='detailLink'  url="../detail/detail?id={{item.id}}">查看详情 ></navigator>
10         </view>
11       </view>
12     </block>
13   </scroll-view>
``` 

做该效果样式就不多说了,一个默认状态样式,一个当前选中样式。(开发小程序的时候,注意class的命名,尽量不要使用层级嵌套,所以class取名的时候要注意唯一性)

View Code     

js部分:该效果基于小程序的组件 scroll-view 开发的,利用bindscroll事件加载回调函数。  

回调事件原理:通过滚动宽度和每个item的宽度从而获取当前滚动的item是第几位,然后给对应的item加上选中class,其他的则去除选中class。

//滑动获取选中商品

  getSelectItem:function(e){

  var that = this;

  var itemWidth = e.detail.scrollWidth / that.data.proList.length;//每个商品的宽度

  var scrollLeft = e.detail.scrollLeft;//滚动宽度

  var curIndex = Math.round(scrollLeft / itemWidth);//通过Math.round方法对滚动大于一半的位置进行进位

  for (var i = 0, len = that.data.proList.length; i < len; ++i) {

  that.data.proListi.selected = false;

  }

  that.data.proListcurIndex.selected = true;

  that.setData({

  proList: that.data.proList,

  giftNo: this.data.proListcurIndex.id

  });

  },

ps:有时候一些酷炫的效果其实实现起来非常简单,建议开发前先理清实现思路,虽然整个文章言简意赅,能看懂就自然懂,乐在分享

本文作者:高丰鸣

原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=3648

原文链接:http://www.wxapp-union.com/portal.php?mod=view&aid=3648

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏谈补锅

html表单提交

1、只能为input、textarea、select三类类型的标签。只有这些标签用户才可能修改值,<label>、<p>、<font>等标签仅供显示用,没有提交...

27430
来自专栏JetpropelledSnake

Python入门之Pycharm开发中最常用快捷键

36520
来自专栏前端小叙

vue父组件中获取子组件中的数据

<FormItem label="上传头像" prop="image"> <uploadImg :width="150"...

1.5K100
来自专栏用户2442861的专栏

notepad++ 快捷键

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haluoluo211/article/details...

20810
来自专栏向治洪

android sdutio常用快捷键

快捷键 说明 F2 定位到高亮错误或警告的位置 F4 若选中项目,打开 Project ...

18990
来自专栏偏前端工程师的驿站

JS魔法堂:LINK元素深入详解

一、前言                               我们一般使用方式为 <link type="text/css" rel="styleshe...

258100
来自专栏Scott_Mr 个人专栏

React Native 系列(八) -- 导航

57080
来自专栏HTML5学堂

iframe基本知识及iframe版本Tab切换

HTML5学堂:本文当中,会依次为大家介绍iframe是什么,为何使用iframe;如何在当前网页中调用iframe中的标签和内容;如何在iframe中调用当前...

41340
来自专栏代码世界

前端之HTML内容

一、HTML介绍 1、Web服务本质   当我们在浏览器中输入一个url后打开一个页面这个过程实质是一个网络编程中的sockt服务端接受指令并发送指令的一个过程...

33590
来自专栏黑泽君的专栏

NetBeans的(默认)快捷键

15620

扫码关注云+社区

领取腾讯云代金券