小程序实现点击tab切换左右滑动_javascript技巧

来源:脚本之家  责任编辑:小易  

<亮缺!DOCTYPE HTML><html><head><title>Title of the document</title><style type="text/css"> .part { width: 400px; padding: 10px; border: 1px solid #999; } .labels { height: 27px; } .label { width: 80px; height: 25px; display: block; float: left; margin: 0 5px; background-color: #193950; border: 2px solid #ccc; border-bottom: none; color: #fff; line-height: 25px; text-align: center; text-decoration: none; } .content { border: 2px solid #ccc; display: none; height: 200px; } .label-hover { background-color: #458EC5; color: #fff; font-weight: bold; } .contents .content:first-child { display: block; }</style> </head><body> <div class="part" id="demo"> e5a48de588b662616964757a686964616f31333330343238<div class="labels"> <a href="###" class="label label-hover">文化</a> <a href="###" class="label">电影</a> <a href="###" class="label">音乐</a> </div> <div class="contents"> <div class="content"> 人类在社会历史发展过程中所创造的物质财富和精神财富的总和。特指社会意识形态。在阶级社会中,文化是阶级斗争的武器。一定文化(当作观念形态的文化)是一定社会的政治和经济的反映,又给予伟大影响和作用于一定社会的政治和经济,从洪秀全的金田起义、康梁的维新变法、何子渊的教育革新,再到孙中山的民主革命无一不是推动社会向前发展的动力。  </div> <div class="content"> 电影,也称映画。是由活动照相术和幻灯放映术结合发展起来的一种现代艺术。迅咐是一门可以容纳文学戏剧、摄影、绘画、音乐、舞蹈、文字、雕塑、建筑等多种艺术的综合艺术,但它又具有独自的艺术特征。 </div> <div class="content"> 物体规则震动发出的声音称为敬昌辩乐音,由有组织的乐音来表达人们思想感情、反映现实生活的一种艺术就是音乐 </div> </div> </div></body><script type="text/javascript"> var label = document.querySelectorAll('#demo .label'), content = document.querySelectorAll('#demo .content'); for(var i=0;i<label.length;i++) { label[i].onmouseover = bind(i); } function bind(i) { return function(){ hideAllContents(); showContent(i); }; } function hideAllContents() { for(var j=0;j<content.length;j++) { content[j].style.display = 'none'; label[j].className = 'label'; } } function showContent(j) { content[j].style.display = 'block'; label[j].className = 'label label-hover'; } </script></html>,<script type="text/javascript"> function show(num) { for (i = 1; i < 4; i++) { if (i ==parseInt(num)) { document.getElementById("div" + i).style.display = "block"; } else { document.getElementById("div"带皮 + i).style.display = "none"; } } } </script></head><body><div><span onmouseover="show(1)" style="cursor:pointer">内容62616964757a686964616fe78988e69d83313333303432381</span> <span onmouseover="show(2)" style="cursor:pointer">内容2</神旦span> <span onmouseover="show(3)" style="cursor:pointer">内容3</span></div><br /><div id="div1" style="display:block;">内容1的内容</div><div id="div2" style="display:none;">内容2的内容</div><div id="div3" style="display:none;"蠢瞎差>内容3的内容</div></body></html>本回答被网友采纳,用onfocus事件触发下边的div替换内容.,百度搜索“JS滑动门”一搜一大把www.zgxue.com防采集请勿采集本网。

本文实例为大家分享了小程序实现点击tab切换左右滑动的具体代码,供大家参考,具体内容如下

能用;而且还是必不可少的;因为javascript的跨平台性使它成了重要组成部分

wxml

js文件名假设为:ss.js,内容如下: function max(a,b){ return (a>=b?a:b); } Html文件名假设为:ss.html,内容如下: ss var a=max(34,55); document.writeln(a); 你按照如上解释操作就会得到预期结果:最大值55;当然若还不是你希望的那样,我想

<scroll-view scroll-x="true" class="navbar-box"> <block wx:for="{{recordMain}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx"> <view class="nav-item " data-current="{{idx}}" bindtap="switchNav"> <text class="{{currentTab == idx ? 'active' : ''}}">{{navItem.title}}</text> </view> </block></scroll-view><swiper style="margin-top:80rpx;height:{{winHeight - 40}}px;" class="tab-box" current="{{currentTab}}" duration="300" data-current="{{idx}}" bindchange="switchTab"> <swiper-item style="height:100%;overflow-y:scroll" wx:for="{{[0,1,2,3,4,5]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-cnetent"> <block wx:for="{{tabContent}}" wx:key=" " bindtap='myOrderDetails'> <!-- 列表 --> <view class='listBox'> <view class='listTop'> <image src='{{item.goodsImg}}' class='goodsImg'></image> <view class='infor'> <view class=''> <text class='name'>{{item.name}}</text> <text class='price'>¥{{item.price}}</text> </view> <view class=''> <text class='choose'>{{item.choose}}</text> <text class='number'>×{{item.number}}</text> </view> </view> </view> <view class='listBottom'> <view>共{{item.number}}件商品,合计:¥{{item.allPrice}}</view> <view class='status'> <button>查看物流</button> <button>确认收货</button> </view> </view> </view> </block> </swiper-item></swiper>

wxss

::-webkit-scrollbar { width: 0; height: 0; color: transparent;}.navbar-box { height: 70rpx; line-height: 70rpx; position: fixed; top: 0rpx; background: white}.nav-item { display: inline-block; width: 16.6%; text-align: center;}.nav-item text { padding-bottom: 10rpx;} page { background: #f2f2f2; font-size: 28rpx;}.active { color: #a53533; border-bottom: 4rpx solid #a53533; box-sizing: border-box;}.menu { font-size: 28rpx; width: 100%; /* overflow-x: scroll; */ border-bottom: 20rpx solid #f2f2f2; padding: 30rpx 30rpx 0rpx 30rpx; box-sizing: border-box; display: flex; justify-content: space-between; position: fixed; top: 0rpx; z-index: 999; background: white;}.chooseNav { padding-bottom: 10rpx;}.listBox { padding: 30rpx; width: calc(100% - 60rpx); margin-left: 30rpx; margin-top: 30rpx; background: white; box-sizing: border-box; border-radius: 8rpx;} .listTop { display: flex; justify-content: space-between;}.goodsImg { width: 200rpx; height: 200rpx; margin-right: 20rpx;}.infor { flex: 1; margin-top: 80rpx; font-size: 26rpx; color: #666;}.infor view { width: 100%; display: flex; justify-content: space-between;}.infor view:nth-of-type(2) { font-size: 24rpx;}.name, .choose { font-weight: 600; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 320rpx;}.price, .number { padding: 5rpx 10rpx; box-sizing: border-box;}.listBottom { text-align: right;}button::after { border: none;}.status button { display: inline-block; background: white; border: 1px solid #dedede; border-radius: 66rpx; font-size: 24rpx; margin-left: 20rpx; color: #666; padding: 0rpx 30rpx; box-sizing: border-box; height: 50rpx; line-height: 45rpx; margin-top: 20rpx;}

wxjs

Page({ data: { recordMain: [ { title: "全部" }, { title: "待付款" }, { title: "待发货" }, { title: "待发货" }, { title: "已完成" }, { title: "已取消" }, ], tabContent: [ { goodsImg: '/img/goods.png', name: '阿莎玛沙阿莎玛沙发阿莎玛沙发阿莎玛沙发阿莎玛沙莎玛沙发发', price: "666", choose: '已选:全新,16期', number: '32', allPrice: '888' }, ], currentTab: 0, navScrollLeft: 0, winWidth: 0, winHeight: 0, }, // 事件处理函数 onLoad: function () { var that = this; /** 获取系统信息*/ wx.getSystemInfo({ success: function (res) { that.setData({ winWidth: res.windowWidth, winHeight: res.windowHeight, }); } }); }, // 滑动事件 // 点击标题切换当前页时改变样式 switchNav:function(e) { console.log(e.currentTarget.dataset.current) var that = this var cur = e.currentTarget.dataset.current; if (that.data.currentTab == cur) { return false; } else { that.setData({ currentTab: cur }) } }, // 滚动切换标签样式 switchTab: function(e) { console.log(e) var that = this; that.setData({ currentTab: e.detail.current }); if (e.detail.current == 0) { console.log(0) } else if (e.detail.current == 1) { console.log(11) } else if (e.detail.current == 2) { console.log(2222) } else if (e.detail.current == 3) { console.log(33333) } else if (e.detail.current == 4) { console.log(44444444) } else if (e.detail.current == 5) { console.log(55555) } }})

微信小程序 获取抄javascript 里的数据wxml如何获取2113js里5261的数据例:wxml里:4102<text id="twl">{{txt}}</text> 通过上面的{{txt}}可以对应获取js里data下定义的txt的值js里察嫌:data: { txt:{} }首先在1653data里定义一个“容器”txt:{},{}内为空代表是从别的地方传值进去,当然{}里也可以直接写数据,如txt:{‘123'},上面的wxml获取了就相老凳当于 <text id="twl">123</text>;通过其他方败含手法传值到容器里用一个this.setData({})的方法,如:onLoad: function (options) { var ta=options.kind; this.setData({ txt:ta, }) }, 这样上面data里定义的txt的值就是ta的值了。Tips:小程序一定要用https内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
  • fireworks菜单生成器mm_menu.js在 ie 7.0 显示问题的解决方法
  • javascript实现checkbox复选框实例代码
  • 用ajax返回html片段中的javascript脚本
  • javascript数组排序的六种常见算法总结
  • 关于mozilla浏览器不支持innertext的解决办法
  • 关于http传输中gzip压缩的秘密探索分析
  • layer关闭当前窗口页面以及确认取消按钮的方法
  • javascript中this详解
  • javascript变量作用域_动力节点java学院整理
  • 微信小程序如何获取javascript 里的数据
  • 求一个javaScript小程序的代码,要求如下
  • 微信小程序javascript修改data值的问题
  • 如何在JavaScript实现自动播放声音(不是网页,运...
  • 微信小程序能用javascript吗
  • 怎么样Javascript编写一个小程序
  • java小程序是javascript吗
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascript微信小程序tab切换可滑动切换导航栏跟随滚动实现代码微信小程序自定义可滑动顶部tabbar选项卡实现页面切换功能示例微信小程序顶部导航栏滑动tab效果10行代码实现微信小程序滑动tab切换微信小程序滚动tab实现左右可滑动切换微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能fireworks菜单生成器mm_menu.js在 ie 7.0 显示问题的解决方法javascript实现checkbox复选框实例代码用ajax返回html片段中的javascript脚本javascript数组排序的六种常见算法总结关于mozilla浏览器不支持innertext的解决办法关于http传输中gzip压缩的秘密探索分析layer关闭当前窗口页面以及确认取消按钮的方法javascript中this详解javascript变量作用域_动力节点java学院整理js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js删除数组里的某个元素方法js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js关闭当前页面(窗口)的几种方式js实现可点击展开与关闭的左侧广告代码bootstrap treeview 扩展addnode方法动态基于javascript实现的快速排序算法分析各种常用浏览器getboundingclientrect的解javascript中的event loop事件循环详解使用layer模态框给新页面传值的方法js异步函数队列功能实例分析js四则运算函数代码对比分析django的q查询及angularjs的data浅析2种javascript继承方式
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved