微信小程式選項卡、列表動態顯示按鈕

阿新 • • 發佈：2018-12-13

小程式選項卡功能實現

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.

微信小程式選項卡、列表動態顯示按鈕

小程式選項卡功能實現 wxml頁面：先給選項卡賦值data-current=“待確認” 新增點選事件bindtap=“clickTab”，在js裡clickTab獲取選項卡的值，e.target.dataset.current 通過that.setData賦值給curr

微信小程式選項卡陣列列表單項選擇切換效果

這裡展示一個工作中用到的微信小程式的單選選項卡切換效果的製作方法效果如圖： wxml: <view class="item" wx:for="{{data}}" wx:for-

微信小程式選項卡切換+swiper自適應高度

如圖所示一個，具體步驟如下：一、wxml部分 <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" b

微信小程式選項卡頁面切換

選項卡效果切換如下：滑動即可對應切換 wxml程式碼 <view class='TabSwiper'> <view class='tab {{currentData

微信小程式選項卡切換

在開發微信小程式的時候，會遇到選項卡切換，這裡有一個小例子，可以做為參考，程式碼如下結構部分: <view class="swiper-tab"> <view class=

微信小程式選項、時間日期選擇器

wxml： <view class="section" > <picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" mode = "selector">

微信小程式wx.redirectTo、wx.navigateTo跳轉失敗

在開發小程式時，用到下面三種頁面跳轉方法，路徑寫對後跳轉沒有反應，也沒報錯。 wx.navigateTo(OBJECT) 保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。 wx.redirectTo(OBJECT) 關閉當前頁面，跳轉

vue和微信小程式的區別、比較 vue和微信小程式的區別、比較

vue和微信小程式的區別、比較連結：https://segmentfault.com/a/1190000015684864 一、生命週期先貼兩張圖： vue生命週期小程式生命週期

微信小程式：json、map、字串轉換

/** * * 字串轉json */ function stringToJson(data){ &nbs

微信小程式領取卡券 java

一、開發前準備 1：申請微信公眾號和微信小程式，這是兩個不同的東西，都需要單獨申請、不同的帳號； 2：微信公眾號需要開通微信卡券的功能； 3：在微信公眾號裡面去繫結小程式； 4：申請微信開放平臺，並將微信公眾號和微信小程式繫結到該開放平臺。（注：繫結到開發平臺下的作用只是為了

微信小程式實現給迴圈列表點選新增類（單項和多項）

在微信小程式裡面沒有DOM物件, 不能操作DOM. 所有的操作通過資料來實現，下面主要實現了給迴圈列表點選新增類的操作一、單項目標需求：實現下圖，給點選的view增加類，每次只能選擇一個。主要思路：給點選的view增加類，

微信小程式自定義單選複選按鈕組的實現(用於實現購物車產品列表功能)

（一）單選按鈕組模型圖如下： index.js Page({ data: { parameter: [{ id: 1, name: '銀色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }],//模擬商

微信小程式實現slideUp、slideDown滑動效果及點選空白隱藏功能示例

本文例項講述了微信小程式實現slideUp、slideDown滑動效果及點選空白隱藏功能。分享給大家供大家參考，具體如下：怎樣實現jq中的slideUp或者slideDown這種動畫效果呢，我的思路是用css3的transform: translateY() 屬性，給需要動畫的元素新增上一個動畫

微信小程式----解析px、rpx、rem、vw實現頁面佈局

PX px：絕對單位，頁面按精確畫素展示。在PC端經常使用的單位，不用計算，直接使用，一般情況不用考慮設計圖紙的來改變頁面的大小。就直接採用px,方便快捷但是不能自適應。

18年6月最新微信小程式獲取使用者名稱、授權彈窗方法

首先說下現在wx.getUserInfo介面已經廢棄，也就是你不能通過該介面獲取nickName等資訊，更不必說授權的彈窗。其次，新的方法是通過<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="o

微信小程式中的迴圈列表，在點選時改變當前項的背景顏色

之前自己在網上找這個功能時，花了我大量的時間也沒找到好一點的方法，於是我自己想出了一個解決方案，不知道其是否實用，反正先放出來，如果有不對的地方請指出。菜鳥一個，求帶！廢話不多說，我就直接上demo圖：我們看到程式碼我們先給我們的主介面設定兩個

微信小程式圖片選擇、上傳到伺服器、預覽（PHP）實現例項

微信小程式圖片選擇、上傳到伺服器、預覽（PHP）實現例項小程式實現選擇圖片、預覽圖片、上傳到開發者伺服器上後臺使用的tp3.2 圖片上傳請求時候的header參考時可以去掉(個人後臺驗證許可權使用) 小程式前端程式碼： <view class="se

微信小程式之px、rem、px、vw、vh

rpx 是微信小程式解決自適應螢幕尺寸的尺寸單位。微信小程式規定螢幕的寬度為750rpx。無論是在iPhone6上面還是其他機型上面都是750rpx的螢幕寬度，拿iPhone6來講，螢幕寬度為375px，把它分為750rpx後， 1rpx = 0.5px。微信小程式同時也支援rem

微信小程式wx:for迴圈列表渲染

列表渲染 wx:for 在元件上使用 wx:for 控制屬性繫結一個數組，即可使用陣列中各項的資料重複渲染該元件。預設陣列的當前項的下標變數名預設為 index，陣列當前項的變數名預設為 item <view wx:for="{{array}}">

微信小程式登入授權、獲取使用者頭像增加樣式【完整原始碼】

完善功能： 1、通過open-data展示使用者頭像程式碼： index.wxml <view wx:if="{{canIUse}}"> <view class='header'> <view class="user

微信小程式選項卡、列表動態顯示按鈕

小程式選項卡功能實現

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()==方法重新整理頁面改變按鈕狀態值

相關推薦

因為swiper高度是固定的，所以用到style=‘height:{{scrollHeight}}px’ bindchange=“swiperTab”

，在js onLoad方法裡通過this.setData 設定高scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100)