小程序选项卡以及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 相关文章推荐
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
详谈javascript中的cookie
Jun 03 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
微信小程序实现左滑删除效果
Nov 18 Javascript
js实现简易计算器小功能
Nov 18 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 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
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
php分页示例分享
2014/04/30 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
详解PHP数组赋值方法
2015/11/07 PHP
js键盘事件的keyCode
2014/07/29 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python内存管理分析
2015/04/08 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
Python引用计数操作示例
2018/08/23 Python
详解python之heapq模块及排序操作
2019/04/04 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Python的条件锁与事件共享详解
2019/09/12 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
python制作抽奖程序代码详解
2021/01/15 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
工艺员岗位职责
2014/02/11 职场文书
个人售房合同协议书
2016/03/21 职场文书
Golang中异常处理机制详解
2021/06/08 Golang