微信小程序选项卡、列表动态显示按钮

小程序选项卡功能实现

wxml页面：

先给选项卡赋值data-current=“待确认” 添加点击事件bindtap=“clickTab”，在js里clickTab获取选项卡的值，e.target.dataset.current 通过that.setData赋值给currentTab，在wxml 选项卡class里进行判断{{currentTab==‘待确认’?‘active’:’’}}，通过 js 调用接口赋值来判断选项卡列表状态。

因为swiper高度是固定的，所以用到style=‘height:{{scrollHeight}}px’ bindchange=“swiperTab”，在js onLoad方法里通过this.setData 设置高scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100)

<view class="swiper-tab"><view class="swiper-tab-item {{currentTab=='待确认'?'active':''}}" data-current="待确认" bindtap="clickTab">待确认   </view><view class="swiper-tab-item {{currentTab=='运输中'?'active':''}}" data-current="运输中" bindtap="clickTab">运输中         </view><view class="swiper-tab-item {{currentTab=='待结算'?'active':''}}" data-current="待结算" bindtap="clickTab">待结算          </view><view class="swiper-tab-item {{currentTab=='已完成'?'active':''}}" data-current="已完成" bindtap="clickTab">已完成          </view><view class="swiper-tab-item {{currentTab=='已取消'?'active':''}}" data-current="已取消" bindtap="clickTab">已取消         </view></view><swiper current='{{currentTab}}' style='height:{{scrollHeight}}px' duration="300" bindchange="swiperTab"><!-- 待确认 -->//在这里我设置了禁止滑动（catchtouchmove='stopTouchMove'）<swiper-item catchtouchmove='stopTouchMove'><scroll-view  scroll-y style='height:{{scrollHeight}}px' ><view class="main" wx:for='{{myReceive}}' wx:key="item"><view data-order-no="{{item.orderNo}}"  bindtap="clickOrder"><view class="main-item"><view class="flex-row th">发单人:</view> <view class="flex-row td2">{{item.publisherName}}</view> <view class="flex-row th1">箱型:</view> <view class="flex-row td1" style="color:red">{{item.boxType}}</view> </view><view class="main-item"><view class="flex-row th">业务类型:</view> <view class="flex-row td">{{item.businessType}}</view> <view class="flex-row th1">箱重:</view> <view class="flex-row td1">{{item.weight}}</view> </view><view class="main-item"><view class="flex-row th">到厂时间:</view> <view class="flex-row td">{{item.limitedAt}}</view> <view class="flex-row th1">港区:</view> <view class="flex-row td1">{{item.harbour}}</view> </view><view class="main-item"><view class="flex-row th">门点地址:</view><view class="flex-row td">{{item.store}}</view><view class="flex-row th1">提箱:</view><view class="flex-row td1">{{item.fetchAddress}}</view></view><view class="main-item"><view class="flex-row th">备注:</view><view class="flex-row td" style="left:140rpx">{{item.state}}</view><view class="flex-row th1">运费:</view><view class="flex-row td1" style="color:red">{{item.freight}}</view></view>    </view><view class='main_solid'></view><view class="main_button"><button>{{item.payType== 'online' ? '平台垫付' : '线下结算'}}</button><button>{{item.cargoType=="import"?'进口':'出口'}}</button><button>不含提箱费</button></view><view class='button1'><button wx:if="{{currentTab =='待确认'}}">待确认</button><button style='background-color: #43cf7c;' wx:elif="{{currentTab =='运输中'&& item.sealBoxNo==null}}" data-order-no="{{item.orderNo}}" bindtap='clickSeal'>报箱封号</button><button style='background-color: #43cf7c;' wx:elif="{{currentTab =='运输中'&&item.receiverPrepay==null}}" data-order-no="{{item.orderNo}}" bindtap='clickPrepay'>垫款</button><button style='background-color: #43cf7c;' wx:elif="{{currentTab =='运输中'&&item.signImg==null}}" data-order-no="{{item.orderNo}}" bindtap='clickReceipt'>回单</button><button style='background-color: #43cf7c;' wx:elif="{{currentTab =='运输中'&&item.signImg!==null&&item.transitCompleteFlg !==1}}" data-order-no="{{item.orderNo}}" bindtap='completed' >已完成</button><button class='completed' wx:elif="{{currentTab =='运输中'&&item.transitCompleteFlg==1}}" data-order-no="{{item.orderNo}}" >已完成</button><button style='background-color: #43cf7c;' wx:elif="{{currentTab =='待结算'&&item.withdrawState===null}}" data-order-no="{{item.orderNo}}" bindtap='requestWithdraw'>待结算</button><button wx:elif="{{currentTab =='待结算'&&item.withdrawState=='待审核'}}">待审核</button></view><view class="img" data-phone="{{item.publisherPhone}}"  bindtap='phoneCall'><image style='width:48rpx;height:48rpx' src='../../images/phone.png'></image></view></view><view wx:if="{{pageEnd==true}}" class='scrollEnd'>已显示所有数据...</view></scroll-view></swiper-item></swiper>

wxss页面：

/* 选项卡样式 */
.swiper-tab{width: 99%;border: 1rpx solid #01C2AB;border-radius: 8rpx;text-align: center;height: 58rpx;line-height: 58rpx;font-weight: bold;background-color: #ffffff;margin-top: 10rpx;
}
.swiper-tab-item{display: table-cell;width: 10%;font-size: 29.16rpx;text-align: center;color:#01C2AB;
}
.swiper-tab-item:not(:last-child){border-right: 4rpx solid #01C2AB;}
.swiper-tab-item.active{background-color: #01C2AB;color: white;
}
/* 列表数据样式 */
.main{position: relative;width:92%;height: 320rpx;top: 10rpx;padding: 20rpx;color: rgba(80, 80, 80, 1);background-color: rgba(255, 255, 255, 1);font-size: 28.08rpx; justify-content: center;align-items: stretch;margin-top: 10rpx;margin: 0px auto;overflow: hidden;transition: left 0.2s ease-in-out;white-space:nowrap;text-overflow:ellipsis;z-index: 5;
}
/* 订单内容样式 */
.main-item{width: 750rpx;height: 55.52rpx;
}
.th{text-align: left;margin-right: 40rpx;position: absolute;left:25rpx;
}
.td{position: absolute;left:160rpx;
}
.td2{position: absolute;left:160rpx;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;  width: 200rpx;
}
.th1{position: absolute;right:29%;
}
.td1{position: absolute;left:540rpx;
}
.main_solid{position: absolute;width:100%;height: 2.34rpx;top: 290rpx;right: 2rpx;color: #999999;background-color:#999999;line-height: 150%;text-align: center;
}
.main_button{width: 854.1rpx;height: 40rpx;display: flex;flex-direction: row;margin-top: 15rpx;margin-left: 2rpx;
}
/* 按钮样式 */
.main_button button{height: 41rpx;font-size: 28.08rpx;padding: 4rpx;line-height: 86%;color: #ff5733;border:2rpx solid #ff5733;background-color:white;border-radius: 0px;margin: 5rpx;}
.main_button button::after {border: 0px
}
.button1,.button2{width: 200rpx;position: relative;top: -38rpx;right: -480rpx;height: 42rpx;display: flex;
}
.button1 button,.button2 button{font-size: 28.08rpx;line-height: 150%;border-radius: 20rpx;
}
.button1 button{background-color: rgb(238, 241, 239);
}
.button2 button{background-color: #01C2AB;
}
/* 电话图标 */
.img{width: 42rpx;position: relative;top: -370rpx;right: -350rpx;
}
.scrollEnd{margin: 0px auto;font-size: 28rpx;color: #999999;margin-top: 20rpx;text-align: center
}

js页面：

var tool = require('../../utils/util.js'); //引入的js
var api = require('../../utils/api.js');
var baseUrl = '../../';
Page({/*** 页面的初始数据*/data: {currentTab: '待确认', isactive: true,scrollHeight: 0,myReceive:[],size: 10,pageEnd: false},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;var myReceive ={state: '待确认', page: '1',size: '10'}//调用接口api.getRequest(api.apiUrl.ORDERS_ACCEPTED_GET,myReceive,function(res){var datas = res.data.data.items;for (let i = 0; i < datas.length; i++) {datas[i]["limitedAt"] = tool.toDate(datas[i]["limitedAt"])datas[i]["createdAt"] = tool.getDateDiff(datas[i]["createdAt"])}that.setData({myReceive: datas})})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {this.setData({scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100),})var that = this;var myReceive = {state: this.data.currentTab, //选项卡所选值page: '1',size: '10'}api.getRequest(api.apiUrl.ORDERS_ACCEPTED_GET, myReceive, function (res) {var datas = res.data.data.items;for (let i = 0; i < datas.length; i++) {datas[i]["limitedAt"] = tool.toDate(datas[i]["limitedAt"])datas[i]["createdAt"] = tool.getDateDiff(datas[i]["createdAt"])}that.setData({myReceive: datas})})},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},//成功 showToast1() {wx.showToast({title: '提交成功',icon: 'success',duration: 4000})},//选项卡点击切换clickTab: function (e) {var that = this;if (this.data.currentTab === e.target.dataset.current) {return false;} else {that.setData({currentTab: e.target.dataset.current})}console.log("ffffffffffffffff" + this.data.currentTab)var that = this;var myReceive = {state: this.data.currentTab,page: '1',size: '10'}api.getRequest(api.apiUrl.ORDERS_ACCEPTED_GET, myReceive, function (res) {var datas = res.data.data.items;console.log(datas)for (let i = 0; i < datas.length; i++) {datas[i]["limitedAt"] = tool.toDate(datas[i]["limitedAt"])}that.setData({myReceive: datas})})},//拨打电话phoneCall: function (e) {wx.makePhoneCall({phoneNumber: e.currentTarget.dataset.phone,success: function () {console.log("拨打电话")},fail:function(){console.log("拨打失败")}})},// 跳转详情clickOrder: function (event){var orderNo = event.currentTarget.dataset.orderNo;wx.navigateTo({url: baseUrl + api.pageUrl.ORDER_PAGE_URL + '?id=' + orderNo})},// 禁止滑动stopTouchMove: function () {return false;},// 跳转报箱封号clickSeal: function (event) {var orderNo = event.currentTarget.dataset.orderNo;wx.navigateTo({url: baseUrl + api.pageUrl.SEAL_PAGE_URL+'?id=' + orderNo})},// 跳转垫款clickPrepay: function (event){var orderNo = event.currentTarget.dataset.orderNo;wx.showModal({title: '提示',content: '无垫款费用或和发单方线下结算垫款费用请点击跳过！如输入垫款信息，费用将由平台连同运费一起垫付并收取平台管理费，请谨慎输入！',success(res) {if (res.confirm) {console.log('用户点击确定')wx.navigateTo({url: baseUrl + api.pageUrl.PREPAY_PAGE_URL+'?id=' + orderNo})} else if (res.cancel) {console.log('用户点击取消')}}})},// 跳转回单clickReceipt: function (event) {var orderNo = event.currentTarget.dataset.orderNo;wx.navigateTo({url: baseUrl + api.pageUrl.RECEIPT_PAGE_URL+'?pid=' + orderNo})},// 已完成completed: function (event) {var that = this;var orderNo = event.currentTarget.dataset.orderNo;var completeData={orderNo:""}api.putRequest('/weChat/orders/' + orderNo + '/transitComplete.do', completeData, function(res){console.log(res.data)that.onShow()})},// 申请结算requestWithdraw: function (event) {var that = this;var orderNo = event.currentTarget.dataset.orderNo;api.putRequest('/weChat/orders/' + orderNo + '/requestWithdraw.do',orderNo,function(res){console.log(res.data)})}
})

也可以不用swiper来制作选项卡，可以直接给选项卡赋值，通过判断来显示，如果需要显示的值不一样也可以直接来判断显示。

动态显示按钮：

通过wx:if来判断显示,如果点击后马上更改状态，就需要添加点击事件，在js设置方法调用接口成功后调用==onLoad()或onShow()==方法刷新页面改变按钮状态值

拨打电话可参考api文档 [link]https://developers.weixin.qq.com/miniprogram/dev/api/wx.makePhoneCall.html.

微信小程序选项卡、列表动态显示按钮相关推荐

微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
微信小程序视频列表封面图禁止多个视频同时播放
微信小程序视频列表用到的组件是 video 链接 https://developers.weixin.qq.com/miniprogram/dev/component/video.html 先附上 ...
新闻列表页flex_微信小程序新闻网站列表页
javascript 技术文章开发微信小程序新闻网站列表页在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属 ...
微信小程序之——自定义分享按钮（完整版）
声明 onShareAppMessage 函数 onShareAppMessage() { return { title: '弹出分享时显示的分享标题' desc: ' ...
微信小程序—页面内分享按钮用图标代替
微信小程序-页面内分享按钮用图标代替前言代码效果图前言张小龙不知道出于什么原因将打开客服会话.触发用户转发.打开授权设置页.打开"意见反馈"页面等功能全都挂载到butto ...
微信小程序多级列表绑定
微信小程序多级列表绑定 1.wxml <view class="weui-form-preview margin-bottom" wx:key="" wx ...
微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...
微信小程序如何通过button按钮实现分享（转发）功能
微信小程序如何通过button按钮实现分享(转发)功能导读:微信小程序通过button按钮实现分享(转发)功能有两种方式,一种是页面内按钮分享,一种是菜单转发.下面具体为大家解答.... 微信小程 ...
微信小程序实用工具——渐变色按钮（一）
微信小程序实用工具--渐变色按钮(一) 文章目录微信小程序实用工具--渐变色按钮(一) 前言按钮一按钮二按钮三按钮四按钮五按钮六按钮七按钮八前言平时我们在开发中的按钮色调过于单调 ...
微信小程序 — 长列表组件 recycle-view 详细教学
微信小程序 - 长列表组件 recycle-view 踩坑问题全解写在前面引入长列表组件 recycle-view 长列表组件 recycle-view 的使用问题一.如何增加下拉刷新功能? 问 ...

微信小程序选项卡、列表动态显示按钮

小程序选项卡功能实现

wxml页面：

因为swiper高度是固定的，所以用到style=‘height:{{scrollHeight}}px’ bindchange=“swiperTab”，在js onLoad方法里通过this.setData 设置高scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100)

wxss页面：

js页面：

也可以不用swiper来制作选项卡，可以直接给选项卡赋值，通过判断来显示，如果需要显示的值不一样也可以直接来判断显示。

动态显示按钮：

通过wx:if来判断显示,如果点击后马上更改状态，就需要添加点击事件，在js设置方法调用接口成功后调用==onLoad()或onShow()==方法刷新页面改变按钮状态值

微信小程序选项卡、列表动态显示按钮相关推荐

最新文章

热门文章