专栏首页极乐技术社区微信小程序左右滑动切换图片酷炫效果(附效果)

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

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

心动吗?那就继续往下看!  先上页面结构吧,也就是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 条评论
登录 后参与评论

相关文章

  • 微信小程序+和风天气完成天气预报

    花半天时间完成简单的小程序应用。适合小程序初学者。

    极乐君
  • 小灯灯实战系列《三》微信小程序:仿今日头条(下)

    接着上一篇  上一篇文章中,我们已经完成了头条的新闻列表、新闻详情功能了,但是还存在一些值得优化的地方,以及评论功能没有加上。  欢迎Star Github开源...

    极乐君
  • 干货 | 扒一扒小程序开发中遇到的那些坑!

    开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。

    极乐君
  • 微信小程序|scroll-view组件

    小程序的视图容器组件分为五个组件,分别是view组件、scroll-view组件、swiper组件、movable组件与cover组件,如图2.1。这里介绍sc...

    算法与编程之美
  • uni学习笔记分享

    杨充
  • 微信小程序布局

    开始我们的入门后,接下来就可以开始创建我们的第一个demo页面了。按照官网的步骤,在pages模块下新建我们自己的模块demo,添加好对应的文件,然后在app....

    用户2305175
  • android长截屏原理及实现代码

    小米系统自带的长截屏应该很多人都用过,效果不错。当长截屏时listview就会自动滚动,当按下停止截屏时,就会得到一张完整的截屏。

    砸漏
  • 小程序-SaUi-遇到的坑

    来点现实中遇到的坑儿吧~~~~~~~~~~~解决前 心中有千万个草泥马在奔跑。解决后,kao 这么简单!!!!!!!!

    ss1121
  • 山科小站小程序

    WindrunnerMax
  • 11.开发newapp个人中心pages/me/me.vue和修改密码功能

    玩蛇的胖纸

扫码关注云+社区

领取腾讯云代金券