data: {
nums: 1,
start: '',
// change:''
// 上一部记忆数据
mid: ''
},
mytouchmove: function (e) {
var start = this.data.start;
var change = parseInt(e.touches[0].pageX);
let that=this;
var nums = this.data.nums;
if ((change - start) % 2 == 0 && (change - this.data.mid) > 0) {
nums++;
if (nums > 35) {
nums = 1;
}
// console.log(n)
} else if ((change - start) % 2 == 0 && (change - this.data.mid) < 0) {
nums--;
if (nums < 1) {
nums = 35;
}
 
 
}
this.setData({
mid: parseInt(change),
nums: nums
})
},
mytouchstart: function (e) {
var start = this.data.start;
start = e.touches[0].pageX;
this.setData({
start: parseInt(start)
})
},
 
 
 
 
<view class='box'>
<view class='pic'>
<image mode='widthFix' class="{{nums==1?'active':''}}" src='../../img/01.jpg'></image>
<image mode='widthFix' class="{{nums==2?'active':''}}" src='../../img/02.jpg'></image>
<image mode='widthFix' class="{{nums==3?'active':''}}" src='../../img/03.jpg'></image>
<image mode='widthFix' class="{{nums==4?'active':''}}" src='../../img/04.jpg'></image>
<image mode='widthFix' class="{{nums==5?'active':''}}" src='../../img/05.jpg'></image>
<image mode='widthFix' class="{{nums==6?'active':''}}" src='../../img/06.jpg'></image>
<image mode='widthFix' class="{{nums==7?'active':''}}" src='../../img/07.jpg'></image>
<image mode='widthFix' class="{{nums==8?'active':''}}" src='../../img/08.jpg'></image>
<image mode='widthFix' class="{{nums==9?'active':''}}" src='../../img/09.jpg'></image>
<image mode='widthFix' class="{{nums==10?'active':''}}" src='../../img/10.jpg'></image>
<image mode='widthFix' class="{{nums==11?'active':''}}" src='../../img/11.jpg'></image>
<image mode='widthFix' class="{{nums==12?'active':''}}" src='../../img/12.jpg'></image>
<image mode='widthFix' class="{{nums==13?'active':''}}" src='../../img/13.jpg'></image>
<image mode='widthFix' class="{{nums==14?'active':''}}" src='../../img/14.jpg'></image>
<image mode='widthFix' class="{{nums==15?'active':''}}" src='../../img/15.jpg'></image>
<image mode='widthFix' class="{{nums==16?'active':''}}" src='../../img/16.jpg'></image>
<image mode='widthFix' class="{{nums==17?'active':''}}" src='../../img/17.jpg'></image>
<image mode='widthFix' class="{{nums==18?'active':''}}" src='../../img/18.jpg'></image>
<image mode='widthFix' class="{{nums==19?'active':''}}" src='../../img/19.jpg'></image>
<image mode='widthFix' class="{{nums==20?'active':''}}" src='../../img/20.jpg'></image>
<image mode='widthFix' class="{{nums==21?'active':''}}" src='../../img/21.jpg'></image>
<image mode='widthFix' class="{{nums==22?'active':''}}" src='../../img/22.jpg'></image>
<image mode='widthFix' class="{{nums==23?'active':''}}" src='../../img/23.jpg'></image>
<image mode='widthFix' class="{{nums==24?'active':''}}" src='../../img/24.jpg'></image>
<image mode='widthFix' class="{{nums==25?'active':''}}" src='../../img/25.jpg'></image>
<image mode='widthFix' class="{{nums==26?'active':''}}" src='../../img/26.jpg'></image>
<image mode='widthFix' class="{{nums==27?'active':''}}" src='../../img/27.jpg'></image>
<image mode='widthFix' class="{{nums==28?'active':''}}" src='../../img/28.jpg'></image>
<image mode='widthFix' class="{{nums==29?'active':''}}" src='../../img/29.jpg'></image>
<image mode='widthFix' class="{{nums==30?'active':''}}" src='../../img/30.jpg'></image>
<image mode='widthFix' class="{{nums==31?'active':''}}" src='../../img/31.jpg'></image>
<image mode='widthFix' class="{{nums==32?'active':''}}" src='../../img/32.jpg'></image>
<image mode='widthFix' class="{{nums==33?'active':''}}" src='../../img/33.jpg'></image>
<image mode='widthFix' class="{{nums==34?'active':''}}" src='../../img/34.jpg'></image>
<image mode='widthFix' class="{{nums==35?'active':''}}" src='../../img/35.jpg'></image>
</view>
<view class='show' bindtouchstart="mytouchstart" bindtouchmove="mytouchmove" ></view>
</view>

微信小程序组件 360的更多相关文章

  1. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  2. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  3. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  4. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  5. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  6. 微信小程序组件通信

    父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 < ...

  7. 微信小程序组件化实践

    Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...

  8. 微信小程序——组件(二)

    在上篇文章组件(一)里已经讲解了如何创建一个项目,现在继续...讲解一个页面布局以及各个组件的使用.在学习过程中,发现小程序支持flex布局,这对于学习过react native的人来说太好了,布局方 ...

  9. 微信小程序组件解读和分析:六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

随机推荐

  1. JavaScript中使用比较多的两种创建对象的方式

    1.使用组合模式创建对象 原型模式创建对象适合封装方法,构造方法模式创建对象适合封装属性 组合方法缺点:将构造方法和原型分开写 <script type="text/javascrip ...

  2. 20155203 实验一《Java开发环境的熟悉》实验报告

    20155203 实验一<Java开发环境的熟悉>实验报告 一.实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 二.练 ...

  3. 20155206 《Java程序设计》实验三实验报告

    20155206 <Java程序设计>实验三实验报告 实验内容 Java敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤 提交一: 提交二: 提交三: 提交四:

  4. 20155234 2610-2017-2第九周《Java学习笔记》学习总结

    20155234第九周<Java学习笔记>学习总结 教材学习内容总结 数据库本身是个独立运行的应用程序 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找 JDBC(Ja ...

  5. 【java笔记】Calendar.getInstance()是什么意思

    Calendar类是个抽象类,因此本身不能被实例化,然而在却创建了Calendar 的对象,但并不是抽象类可以创建对象这个对象并不是Calendar 自身实例,而是其子类实例,这是在getInstan ...

  6. 图论-求有向图的强连通分量(Kosaraju算法)

    求有向图的强连通分量     Kosaraju算法可以求出有向图中的强连通分量个数,并且对分属于不同强连通分量的点进行标记. (1) 第一次对图G进行DFS遍历,并在遍历过程中,记录每一个点的退出顺序 ...

  7. iOS 影音新格式 HEIF HEVC

    苹果在 iOS 11 的发布会上,推出了两种新的媒体格式 HEIF HEVC,都是为了保证画质的情况下,大大减少视频.照片的大小. 一.简介 HEVC全称 High Efficiency Video ...

  8. HBase 第四章 HBase原理

    1  体系图 HBase中的每张表都通过行键按照一定的范围被分割成多个子表(HRegion),默认一个HRegion超过256M就要被分割成两个,这个过程由HRegionServer管理,而HRegi ...

  9. python全栈开发-面向对象-初识2

    python_17_day 今日主要内容: 1.类空间,对象空间,查询顺序. 2.组合. 1.类空间,对象空间,查询顺序. class Person: animal = '高级动物' soul = ' ...

  10. Python接口测试实战5(上) - Git及Jenkins持续集成

    如有任何学习问题,可以添加作者微信:lockingfree 课程目录 Python接口测试实战1(上)- 接口测试理论 Python接口测试实战1(下)- 接口测试工具的使用 Python接口测试实战 ...