微信小程序实现滑动tab切换和点击tab切换并显示相应的数据（附源代码）
微信小程序开发交流qq群 581478349
承接微信小程序开发。扫码加微信。
正文：
先上效果图：
这里主要用到了swiper组件和三目运算，直接上代码， 样式只有三个class，简单粗暴，懒的小伙伴们可以直接拿来用，喜欢的点个支持
<view><view class="swiper-tab"><view class="bre swiper-tab-list {{tab==0 ? 'on' : ''}}" data-current="0" bindtap="tab_click">图文详情</view><view class="swiper-tab-list {{tab==1 ? 'on' : ''}}" data-current="1" bindtap="tab_click">产品参数</view></view><swiper current="{{tab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="tab_slide"><swiper-item>图文详情</swiper-item><swiper-item>产品参数</swiper-item></swiper>
</view>Page({data: {tab: 0},tab_slide: function (e) {//滑动切换tab var that = this;that.setData({ tab: e.detail.current });},tab_click: function (e) {//点击tab切换var that = this;if (that.data.tab === e.target.dataset.current) {return false;} else {that.setData({tab: e.target.dataset.current})}},
}).swiper-tab{ width: 100%; border-bottom: 2rpx solid #eee; text-align: center; line-height: 80rpx;background: #fff;font-size: 14px;
}
.on{ color: #dd2727; border-bottom: 5rpx solid #dd2727;
}
.swiper-tab-list{ font-size: 29rpx; display: inline-block; width: 49.5%; color: #333;
}相关文章：
使用java.util.Timer来周期性的执行制定的任务
使用java.util.Timer来周期性的执行制定的任务 1 public class HandlerTest extends Activity {2 int[] images new int[] {3 R.drawable.baiyang, R.drawable.jinniu, R.drawable.shuangyu4 };5 6 int currentImageID 0;7 8 Override9 prot…
数据库更行通知_哪个更好？ 数据驱动还是数据通知？
数据库更行通知by Casper Sermsuksan由Casper Sermsuksan 哪个更好？ 数据驱动还是数据通知？ (Which is better? Data-Driven or Data-Informed?) I recently spoke at the Tech in Asia Product Development Conference in Jakarta about being data-…
从某一日期开始过day天的日期
一个SX问我的，我就写了写......从2010.1.1开始，给了一组测试数据3的话输出2010.1.4星期1，所以说2010.1.1是星期五，总星期就是 (day5)%70?7:(day5)%7下面是代码...... #include <iostream> #include <stdlib.h> using…
dhtmlxgrid表格笔记
因为公司以前架构的需求，所以对于dhtmlxgrid进行了简单的学习，参照dhtmlxgrid给出的例子进行摸索 1、必须引入的js包 <link rel"STYLESHEET" type"text/css" href"css/dhtmlxgrid.css"> <link rel"stylesh…
配置 腾讯云 SSL 证书 SSL证书实现https，环境：phpStudy下Apache环境
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文： SSL证书实现https，环境：phpStudy下Apache环境 前提条件： 1.申请并下载好腾讯云申请的免费 ssl证书 腾讯云免费证书申请地址： http…
把canvas放在盒子内_如何将您的专业知识放在盒子中并出售
把canvas放在盒子内At RISE Conf in Hong Kong, Gary Vaynerchuk was asked:在香港的RISE Conf会议上， 加里韦纳楚克被问到： How do I make a living off my passion?我如何以激情为生？ The answer from the marketing mogul was strai…
bzoj 4771: 七彩树 树链的并+可持久化线段树
题目大意: 给定一颗树,询问树中某个点x的子树中与其距离不超过d的所有点中本质不同的颜色数 强制在线 题解: 一下午终于把这道题叉掉了。 写了三个算法,前两个都是错的,后一个是%的网上大爷们的题解. 首先我们发现这道题有一个特点:没有修改操作 !! 这就使我们能够对颜色进行预…
Chapter 0: 引论
引论我之前就看过了，在我刚买到这本书的时候。 而我买这本书的日子，已经是两年前了。我就是这样子的，我买了好多好多关于技术的书，这些书都是很贵很贵的，可是买完回来之后就看了第一章，然后就一直丢在一边&…
开发常用CSS
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文： keyframes -> 使 div 元素匀速向下移动 div{animation:myanimation 5s infinite;} keyframes myanimation {from {top:0px;}to {top:200px;}} 注:animation ->Css3动画属性 …
javascript网络_没有JavaScript的网络外观
javascript网络A Berlin-based web developer — who codes JavaScript for a living — decided to go an entire day without JavaScript.一家位于柏林的网络开发人员(为JavaScript编写代码为生)决定不使用JavaScript进行一整天的工作。 Let’s face it — in an insane wor…
js中的各种宽高以及位置总结
在javascript中操作dom节点让其运动的时候，常常会涉及到各种宽高以及位置坐标等概念，如果不能很好地理解这些属性所代表的意义，就不能理解js的运动原理，同时，由于这些属性概念较多，加上浏览器之间 实现方式…
关于百度编辑器UEditor在asp.net中的使用方法！
为了完成自己想要的功能效果，在项目中使用到了百度编辑器，为了搞明白，苦心学习查资料搞了整整一天，总结一下。 在asp.net 的项目中目前我觉得有两种情况，一种是没有使用模板页的，一种是使用了模板页的&…
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文： 先上效果图，再附上完整源码： 1.多张图片循环渲染后预览、保存、识别带参数二维码 <view wx:for"{{imgalist}}" class"previewimg">…
vba编程教程视频教程_我已经完成了编程教程。 怎么办？
vba编程教程视频教程by Preethi Kasireddy通过Preethi Kasireddy 我已经完成了编程教程。 怎么办？ (I’ve done programming tutorials. Now what?) This week’s question for my Ask Preethi series is about how to go from simply doing tutorials to the act…
【官方文档】Nginx负载均衡学习笔记（二）负载均衡基本概念介绍
简介 负载均衡（Server Load Balancer）是将访问流量根据转发策略分发到后端多台 ECS 的流量分发控制服务。负载均衡可以通过流量分发扩展应用系统对外的服务能力，通过消除单点故障提升应用系统的可用性。 负载均衡主要有如下几个功能点&#x…
微信小程序本地缓存
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文： 关于微信小程序本地缓存，做一下笔记，希望能够帮助到看到这篇分享的人 //index.js 这里是保存 var a 1 wx.setStorageSync(a, a) //logo.js 这里是取保存的…
css 形状_在CSS形状之外思考
css 形状CSS is based off a box model. If you have an image that is a circle that you want to wrap text around, it will wrap around the images’ bounding box.CSS基于盒模型。 如果您要环绕的图像是一个圆，则它将环绕图像的边界框。 外型 (Shape-outside…
js-ES6学习笔记-module（4）
1、<script>标签打开defer或async属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。 defer与async的区别是：前者要等到整个页面正常渲染结束…
图像边缘检测--OpenCV之cvCanny函数
图像边缘检测--OpenCV之cvCanny函数 分类： C/C void cvCanny( const CvArr* image, CvArr* edges, double threshold1, double threshold2, int aperture_size3 ); image单通道输入图像.edges单通道存储边缘的输出图像threshold1第一个阈值threshold2第二个阈值aper…
微信小程序 封装网络请求并调用
微信小程序开发交流qq群 526474645 正文： util.js // 网络请求 const request function(url, method, data, msg, succ, fail, com) {// 小程序顶部显示Loadingwx.showNavigationBarLoading();if (msg ! "") {wx.showLoading({title: msg})}wx.requ…
什么是导师负责制_为什么一个导师是不够的
什么是导师负责制by Rick West由里克韦斯特(Rick West) 为什么一个导师是不够的 (Why one mentor just isn’t enough) A mentor can give career guidance and help with learning. They can teach you how to solve problems, network, and the list goes on.导师可以提供职…
CodeForces 114B 【STL应用】
思路： 原来string类能sort 和 swap....太强了.... 注意：字典序最小输出，因为某个地方写挫了，sort了n发，代码挫。 #include <bits/stdc.h> using namespace std; typedef long long LL;int tol; map<string,in…
微信小程序订单页面下拉刷新上拉分页加载
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文： 效果图： 代码： json代码： {"enablePullDownRefresh": true,"backgroundColor": "#19ad19" } js代码：…
从网络上获取一张图片简单的
告诉ScrollView缩放的视图，要设置scrollView的代理。 转载于:https://www.cnblogs.com/x1024598115/p/4182674.html
es6 generator_让我们探索一下ES6 Generators
es6 generatorby Tiago Lopes Ferreira由Tiago Lopes Ferreira 让我们探索一下ES6 Generators (Let’s explore ES6 Generators) Generators are an implementation of iterables.生成器是可迭代对象的实现 。 The big deal about generators is that they are functions tha…
没听说过这些，就不要说你懂并发了，three。
引言 很久没有跟大家再聊聊并发了，今天LZ闲来无事，跟大家再聊聊并发。由于时间过去的有点久，因此LZ就不按照常理出牌了，只是把自己的理解记录在此，如果各位猿友觉得有所收获，就点个推荐或者留言激励下LZ&am…
设计模式之代理模式（Proxy Pattern）
定义：为其他对象提供一种代理以控制这个对象的访问，也叫做委托模式。 咱们比作游戏，通俗讲代理模式就是，一个主题虚基类派生出两个子类，一个玩家类，实现相关操作，一个是代练类，代替执…
[微信小程序]给data的对象的属性赋值
有问题可以扫码加我微信，有偿解决问题。承接小程序开发。 微信小程序开发交流qq群 173683895 、 526474645 ； 正文： <view wx:for"{{leixing}}"><button class"leixing_btn {{user_infor.lx_btnitem.divingtype…
无家可归的iPhone
by Fabrice Dubois通过Fabrice Dubois 无家可归的iPhone (Homeless iPhone) So, apparently the next iPhone won’t have a physical Home button. There’s been much speculation already about what that means for the user. The bottom area of the device, for some, w…
Spring 自动化装配Bean
声明一张cd的接口： public interface CompactDisc {public abstract void play(); } 实现cd接口： Component("SgtPeppers") public class SgtPeppers implements CompactDisc {private String title "Sgt.Peppers Lonely Hearts Club Ba…