小程序选项卡以及swiper套用(跨页面)


Posted in Javascript onJune 19, 2020

选项卡tab和swpier之间的套用,供大家参考,具体内容如下

其实我之前写过一篇选项卡的切换demo,大家阔以参考一下 小程序多个选项卡切换
那今天写这个demo呢,是因为项目需求,所以仅供参考。

首先,我是拿到了home.wxml的数组下标,通过url传参的方式去将这个数组id传到下一个页面,下一个页面接收以后再将id赋值给对应的tab或者currentId(swiper 的下标)
实现上一个页面进来以后直接进入对应的页面。

首先看一下效果图吧

小程序选项卡以及swiper套用(跨页面)

当我点击违章查询

小程序选项卡以及swiper套用(跨页面)

跳转到对应的页面展示对应的内容

那么上菜!!!

home.wxml

<view class='wrpg'>
 <view class='wrpg-bottom'>
 <view class='myOrder'>
 <view class='myTips'>
 <text>我的订单</text>
 </view>
 <view class='allOrder' >
 <view class='item-Order' wx:for="{{allOrder}}" wx:key='' >
 <view class='washcar' bindtap='toOrder' data-index='{{index}}' data-id='{{item.id}}'>
  <image class='washcarImg' src="{{item.washcar}}" ></image>
  <text class='tips'>{{item.tips}}</text>
 </view> 
 </view>
 </view>
 </view>
 </view>
</view>

home.wxss

.wrpg {
 width: 90%;
 height: 100%;
 margin: 0 auto;
}
.myOrder {
 margin: 20rpx auto;
 width: 100%;
 height: 260rpx;
 background: #fff;
 border-radius: 10rpx;
}

.myTips {
 font-size: 30rpx;
 font-weight: bold;
 margin: 10rpx;
}

.allOrder {
 width: 100%;
 height: 150rpx;
 display: flex;
 justify-content: center;
 align-items: center;
}

.item-Order {
 width: 100%;
 height: 100rpx;
 display: flex;
 justify-content: center;
 align-items: center;
}

.washcar {
 width: 100rpx;
 height: 100rpx;
 display: flex;
 justify-content: center;
 align-items: center;
/* 保持行级 */
 flex-flow: column nowrap;
 font-size: 25rpx;
}

.washcarImg {
 width: 45rpx;
 height: 45rpx;
}

.tips {
 margin-top: 10rpx;
}

home.js

数组写在data里

allOrder: [{
 id:0,//这里就是你需要的传递数组的id
 washcar: "images/water.png",
 tips: "洗车"
 },
 {
 id:1,
 washcar: "images/bank.png",
 tips: "违章查询"
 },
 {
 id: 2,
 washcar: "images/money.png",
 tips: "商场订单"
 },
 {
 id: 3,
 washcar: "images/peo.png",
 tips: "会员"
 },
 ],
//事件处理函数,通过url传参

 toOrder(e){

 var id = e.currentTarget.dataset.id;
 console.log(id);
 wx.navigateTo({
 url: 'order/order?id='+id,
 })
 },

OK!上一个页面传递成功,那么接下来就是接收了

order.wxml

<view class='wrpg'>
 <view class='wrpg-top'>
 <view class="content-titles">
 <view class='washcar {{index==indexNum?"active":""}}' wx:for="{{washcar}}" data-index='{{index}}' wx:key="" bindtap='tabChange'>
 <text>{{item.tips}}</text>
 </view>
 </view>
 </view>
 <view class='wrpg-content'>
 <swiper vertical="{{false}}" current='{{indexNum}}' bindchange='Change'>
 <!-- 第一屏 -->
 <swiper-item>
 <view class=''>washcar</view>
 </swiper-item>
 <!-- 第二屏 -->
 <swiper-item>
 <view class="select-content-titles">
  <view class='selectContent {{idx == index? "type-item-on" : ""}}' wx:for="{{selecttab}}" data-index='{{index}}' wx:key="" bindtap='checkviolation'>
  <text>{{item.tips}}</text>
  </view>
 </view>
 <view wx:if='{{idx == 0}}' class='tab1' data-id='0'>
  <image class='tab1Img' src="../images/order.png"></image>
  <text>你暂时还没有违章查询~</text>
 </view>
 <view wx:if='{{idx == 1}}' class='tab2' data-id='1'>222</view>
 <view wx:if='{{idx == 2}}' class='tab3' data-id='2'>333</view>
 <view wx:if='{{idx == 3}}' class='tab3' data-id='3'>444</view>
 </swiper-item>
 <!-- 第三屏 -->
 <swiper-item>
 <view class="select-content-titles">
  <view class='selectContent {{idx == index? "type-item-on" : ""}}' wx:for="{{ordertab}}" data-index='{{index}}' wx:key="" bindtap='checkviolation'>
  <text>{{item.tips}}</text>
  </view>
 </view>
 <view wx:if='{{idx == 0}}' class='tab1' data-id='0'>
 000
 </view>
 <view wx:if='{{idx == 1}}' class='tab2' data-id='1'>
 <image class='tab1Img' src="../images/order.png"></image>
  <text>你暂时还没有商品~</text>
  <text class='buyMore'>去逛逛~</text>
 </view>
 <view wx:if='{{idx == 2}}' class='tab3' data-id='2'>
 
  <image class='orderDetailImg' src="../images/orderDetail.png"></image>
 </view>
 <view wx:if='{{idx == 3}}' class='tab3' data-id='3'>444</view>
 </swiper-item>
 <!-- 第四屏 -->
 <swiper-item>
 <view class=''>vip</view>
 </swiper-item>
 </swiper>

 </view>
</view>

order.wxss

/* pages/home/order/order.wxss */

page {
 width: 100%;
 height: 100%;
 background: rgb(244, 246, 250);
}

.wrpg-top {
 width: 100%;
 height: 80rpx;
 background: #fff;
}

.content-titles {
 display: flex;
 justify-content: center;
 align-items: center;
}

.washcar {
 width: 200rpx;
 height: 100rpx;

 display: flex;
 justify-content: center;
 align-items: center;
 margin-left: 10rpx;
 font-size: 30rpx;

}

.active {
 font-size: 40rpx;
 font-weight: bold;
}

swiper{
 width:100%;
 height: 1100rpx;


}
.select-content-titles{
width: 100%;
height: 80rpx;
background: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
}
.selectContent{
 width: 200rpx;
 height: 100rpx;
 display: flex;
 justify-content: center;
 align-items: center;
 margin-left: 10rpx;
 font-size: 25rpx;
}
.type-item-on {
border-bottom: 4rpx solid rgb(95, 162, 238);
color: rgb(95, 162, 238);
}
.tab1,.tab2{
width: 100%;
height: 100%;

 display: flex;
 justify-content: center;
 align-items: center;
 flex-flow: column;
 font-size: 30rpx;
}
.tab1Img{
 width: 100rpx;
 height: 100rpx;
}
.buyMore{
 color: rgb(95, 162, 238);
}
.orderDetailImg{
width: 100%;
height: 600rpx;
margin: 10rpx;
}

1.接下来就是需要在在order.js接收上一个页面home的数组id:

onload事件里刷新order.wxml的选项卡数组下标,
这样就是从上一个页面子元素进入本页面的对应子元素。

但是

我的这里拿到这个homeid以后没有直接赋值给我的washcar数组的id。
我是赋值给了我的swiper的下标indexNum。
因为我的swiper 和导航的选项卡数组下标做了联动,我只需要改其中之一就能实现。所以我就取巧了,不建议这样做,只是我刚好有罢了

2.在swiper里,利用swiper组件的属性 current拿到对应的滑块的下标,将滑块的下标赋值给我的order.wxml的选项卡数组下标,就可以实现滑动的同时,刷新tab对应的选项样式。

// pages/home/order/order.js

Page({

 /**
 * 页面的初始数据
 */
 data: {
 idx: 0, //默认选中第一项
 indexNum: 0,
 washcar: [{
 tips: "洗车"
 },
 {
 tips: "违章查询"
 },
 {
 tips: "商城订单"
 },
 {
 tips: "会员"
 },
 ],
 selecttab: [{
 id: 0,
 tips: "处理中"
 },
 {
 id: 1,
 tips: "已成功"
 },
 {
 id: 2,
 tips: "已撤销"
 },
 {
 id: 3,
 tips: "全部"
 },

 ],
 ordertab: [{
 id: 0,
 tips: "全部"
 },
 {
 id: 1,
 tips: "待付款"
 },
 {
 id: 2,
 tips: "待收货"
 },
 {
 id: 3,
 tips: "待评价"
 },
 ],
 },
//导航栏点击事件
 tabChange: function(e) {
 var navigitionIndex = e.currentTarget.dataset.index;
 this.setData({
 indexNum: navigitionIndex
 })

 },
 //选项卡滑动
 Change(e) {
 var cur = e.detail.current;
 this.setData({
 indexNum: cur
 })
 },
 //查询违章选项卡
 checkviolation(e) {
 let that = this;
 let index = e.currentTarget.dataset.index;
 that.setData({
 idx: index,
 })

 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 var id = options.id;
 this.setData({
 indexNum:id
 })
 },

一开始我想点击事件和滑动事件都共用一个滑动事件,通过判断来控制下标,但bindtap和滑动里的bindchange事件,根本就是两个事件,无法再一个事件里实现,我一直纠结在使用一个事件来实现,导致一直卡壳。想复杂了

其实我是一个前端小白,从后台转过了也才没有多久,希望有不对可以指正。广泛交友。共同成长

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
微信小程序人脸识别功能代码实例
May 07 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 #Javascript
小程序实现多个选项卡切换
Jun 19 #Javascript
微信小程序 button样式设置为图片的方法
Jun 19 #Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 #Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 #Javascript
深入解读VUE中的异步渲染的实现
Jun 19 #Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 #Javascript
You might like
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
php数组去重复数据示例
2014/02/25 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
jQuery使用方法
2017/02/04 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
Python SQLite3数据库操作类分享
2014/06/10 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
道歉信范文
2015/05/12 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
总结python多进程multiprocessing的相关知识
2021/06/29 Python