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

  心动吗?那就继续往下看!

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

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

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

.scroll-view_H{
width: 100%;
text-align: center;
white-space: nowrap;
}
.scroll_item {
position: relative;
width: 84%;
margin: 0 1%;
left: -2%;
display: inline-block;
border-radius: 20rpx !important ;
overflow: hidden;
transform: scale(0.9);
box-shadow: 0 0 10px #ccc;
vertical-align: top;
top: 5%;
height: 72%;
background-color: #fff;
}
.scroll_item:first-child{
margin-left: 8%;
left: 0;
}
.scroll_item:last-child{
margin-right: 8%;
left: 0;
}
.scroll_item.selected{
transform: scale(1);
border: solid 1px #ffcd54;
}
.scroll_item .proImg{
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
width: 100%;
max-height: 200rpx;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.scroll_item image {
width: 100%;
float: left;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
.detailBox {
padding: 30rpx 5% 30rpx 5%;
float: left;
width: 90%;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
background: #fff;
}
.proTitle {
font-size: 36rpx;
color: #666;
line-height: 50rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.proDec {
font-size: 30rpx;
color: #999;
line-height: 50rpx;
}
.proPrice {
font-size: 48rpx;
color: #CA414C;
line-height: 90rpx;
}
.detailLink{
color: #666;
font-size: 30rpx;
}

  

  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.proList[i].selected = false;
}
that.data.proList[curIndex].selected = true;
that.setData({
proList: that.data.proList,
giftNo: this.data.proList[curIndex].id
});
},

  

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

微信小程序左右滑动切换图片酷炫效果(附效果)的更多相关文章

  1. 微信小程序左右滑动切换图片酷炫效果

    开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. < ...

  2. 微信小程序左右滑动切换页面示例代码--转载

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...

  3. 微信小程序写tab切换

    微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view ...

  4. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  5. 微信小程序Tab选项卡切换大集合

    代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  6. 微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签

    微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...

  7. 微信小程序缓存滑动距离,当页面浏览到一定位置,滑动其他页面后返回该页面记录之前的滑动距离

    15.微信小程序缓存滑动距离 我们在浏览页面的时候,然后左滑或者右滑到新的页面,等返回此页面,我们希望可以记录上次滑动的距离 虽然这个实现起来并不难,但是会遇到一些坑,因为scroll-view的组件 ...

  8. 微信小程序-显示外链图片 bug

    微信小程序-显示外链图片 bug 显示外链图片 bug 403 bug 禁止外链,未授权 https://httpstatuses.com/403 image component 图片.支持 JPG. ...

  9. 微信小程序版博客——开发汇总总结(附源码)

    花了点时间陆陆续续,拼拼凑凑将我的小程序版博客搭建完了,这里做个简单的分享和总结. 整体效果 对于博客来说功能页面不是很多,且有些限制于后端服务(基于ghost博客提供的服务),相关样式可以参考截图或 ...

随机推荐

  1. OwinHost.exe用法

    简介 OwinHost.exe是微软提供的自宿主host,如果自己不想写owin的host,可以用这个. 官方对OwinHost的描述为:Provides a stand-alone executab ...

  2. Linux基本操作笔记

    1.Linux是一个统称,内核是一致的.分为Linux系统管理员和Linux程序员包括管理和软件开发. 2.要掌握Linux,有四步,第一,在Linux平台上的开发,比如,vi.gcc.gdb等和Li ...

  3. nginx的配置

    1. brew install nginx 2.brew services list 3.brew services start nginx 4.brew servicies stop nginx 5 ...

  4. 多个tab选项卡

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. IdentityServer Topics(2)- 定义资源

    您通常在系统设计中的第一件事就是您要保护的资源. 这可能是您的用户的身份信息,如个人资料数据或电子邮件地址,或访问API. 您可以使用C#对象模型定义资源(硬编码),或从数据存储中加载它们. IRes ...

  6. 微信小程序demo-环球小镇

    微信小程序-环球小镇说明:实现了环球小镇(huanqiuxiaozhen.com)移动端商城客户端部分功能,包括首页,分类,购物车,帐户,品牌列表,商品详情等功能.    项目下载:http://bb ...

  7. 详解zkw算法解决最小费用流问题

    网络流的一些基本概念 很多同学建立过网络流模型做题目, 也学过了各种算法, 但是对于基本的概念反而说不清楚. 虽然不同的模型在具体叫法上可能不相同, 但是不同叫法对应的思想是一致的. 下面的讨论力求规 ...

  8. [51nod1462]树据结构

    题面: 给一颗以1为根的树. 每个点有两个权值:vi, ti,一开始全部是零. Q次操作: 读入o, u, d o = 1 对u到根上所有点的vi += d  o = 2 对u到根上所有点的ti += ...

  9. 2017ecjtu-summer training #1 UVA 10399

    It has been said that a watch that is stopped keeps better time than one that loses 1 second per day ...

  10. JS数组中shift()和push(),unshift()和pop()操作方法使用

    Javascript为数组专门提供了push和pop()方法,以便实现类似栈的行为.来看下面的例子: var colors=new Array();       //创建一个数组 var count= ...