精华内容
下载资源
问答
  • 微信小程序选项卡切换

    万次阅读 2018-01-14 13:18:29
    在开发微信小程序的时候,会遇到选项卡切换,这里有一个小例子,可以做为参考,代码如下 结构部分: view class="swiper-tab"> view class="swiper-tab-item {{currentTab==0?'active':''}}" data-...

    在开发微信小程序的时候,会遇到选项卡切换,这里有一个小例子,可以做为参考,代码如下

    结构部分:

    <view class="swiper-tab">
    <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">热点</view>
    <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">体育</view>
    <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">社会</view>
    </view>

    <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
    <swiper-item><view>热点</view></swiper-item>
    <swiper-item><view>体育</view></swiper-item>
    <swiper-item><view>社会</view></swiper-item>
    </swiper>
    JS部分

    var app = getApp()
    Page({
    data: {
    currentTab: 0
    },
    onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数

    },
    //滑动切换
    swiperTab: function (e) {
    var that = this;
    that.setData({
    currentTba: e.detail.current
    });
    },
    //点击切换
    clickTab: function (e) {

    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
    return false;
    } else {
    that.setData({
    currentTab: e.target.dataset.current
    })
    }
    }

    })
    样式部分

    .swiper-tab{
    width: 100%;
    border-bottom: 2rpx solid #ccc;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-weight: bold;
    }
    .swiper-tab-item{
    display: inline-block;
    width: 33.33%;
    color:red;
    }
    .active{
    color:aqua;
    border-bottom: 4rpx solid red;
    }

    展开全文
  • 小程序选项卡功能实现 wxml页面: 先给选项卡赋值data-current=“待确认” 添加点击事件bindtap=“clickTab”, 在js里clickTab获取选项卡的值,e.target.dataset.current 通过that.setData赋值给currentTab,在...

    小程序选项卡功能实现


    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.

    展开全文
  • 微信小程序选项卡页面切换

    万次阅读 2018-01-31 21:13:37
    最近搞了个微信小程序切换的demo,有点像头条的那个,我给你大家分享下。 代码如下: index.wxml view class='topTabSwiper'> view class='tab {{currentData == 0 ? "tabBorer" : ""}}' data-current = "0...

    最近搞了个微信小程序切换的demo,有点像头条的那个,我给你大家分享下。
    这里写图片描述
    代码如下:
    index.wxml

    <view class='topTabSwiper'>
        <view class='tab  {{currentData == 0 ? "tabBorer" : ""}}'  data-current = "0" bindtap='checkCurrent'>推荐</view>
        <view class='tab  {{currentData == 1 ? "tabBorer" : ""}}'  data-current = "1" bindtap='checkCurrent'>热点</view>
        <view class='tab  {{currentData == 2 ? "tabBorer" : ""}}'  data-current = "2" bindtap='checkCurrent'>关注</view>
    </view>
    <swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
      <swiper-item><view class='swiper_con'>welcome come to 推荐</view></swiper-item> 
      <swiper-item><view class='swiper_con'>welcome come to 热点</view></swiper-item>
      <swiper-item><view class='swiper_con'>welcome come to 关注</view></swiper-item>  
    </swiper>

    index.wxss

    .tab{float: left; width: 33.3333%;text-align: center;padding: 10rpx 0; }
    .topTabSwiper{border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; zoom: 1;}
    .topTabSwiper:after{content: ""; clear: both;display: block;}
    .tabBorer{border-bottom: 1px solid #f00; color: #f00;}
    .swiper{width: 100%;}
    .swiper_con{text-align: center; width: 100%; height: 100%; padding: 80rpx 0;}

    index.js

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
          currentData : 0,
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
      },
      //获取当前滑块的index
      bindchange:function(e){
        const that  = this;
        that.setData({
          currentData: e.detail.current
        })
      },
      //点击切换,滑块index赋值
      checkCurrent:function(e){
        const that = this;
    
        if (that.data.currentData === e.target.dataset.current){
            return false;
        }else{
    
          that.setData({
            currentData: e.target.dataset.current
          })
        }
      }
    })

    这个可以在项目用,而且我之前也是见过有这样功能的小程序,特此献出代码,希望能帮到朋友们。
    demo下载地址

    展开全文
  • 微信小程序 选项卡(数据双层循环)

    千次阅读 2019-06-22 11:49:12
    第一种:swiper选项卡,可点击可滑动(swiper自带了一个150的高度,高度不好控制) ...-- 从接口获取数据写法 index是小程序自带的可以直接用 <view class="tabbox" wx:for="{{detail_data.copywri...

    第一种:swiper选项卡,可点击可滑动(swiper自带了一个150的高度,高度不好控制)

    html

    <!-- 选项卡 -->
    <view class='topTabSwiper'>
    
    <!-- 从接口获取数据写法 index是小程序自带的可以直接用
    		<view class="tabbox" wx:for="{{detail_data.copywriting}}" wx:key="index">
    			<text  class="tab {{currentData == index ? 'tabBorer' : ''}}"  data-current = "{{index}}" bindtap='checkCurrent'>{{item.title}}</text>
    		</view> 
    -->
    	
    	<view class="tabbox">
    		<text class='tab  {{currentData == 0 ? "tabBorer" : ""}}'  data-current = "0" bindtap='checkCurrent'>菜单一</text>
    		<text class='tab  {{currentData == 1 ? "tabBorer" : ""}}'  data-current = "1" bindtap='checkCurrent'>菜单二</text>
    		<text class='tab  {{currentData == 2 ? "tabBorer" : ""}}'  data-current = "2" bindtap='checkCurrent'>菜单三</text>
    	</view> 
    	
    
    </view>
    
    <swiper   current="{{currentData}}" class='swiper3'  duration="300" bindchange="bindchange">
    <!--从接口获取数据写法
    	<swiper-item wx:for="{{detail_data.copywriting}}" wx:key="index">
    
    		<view class='swiper_con'>
    			<view class="adrss_box" wx:for="{{item.detailmessage}}" wx:for-item="cell" wx:key="index">
    				{{cell.title.titlestr}}
    			</view>
    		</view>
    	</swiper-item> 
    -->
    	<swiper-item><view class='swiper_con'>内容一</view></swiper-item>
    	<swiper-item><view class='swiper_con'>内容二</view></swiper-item>  
    	<swiper-item><view class='swiper_con'>内容三</view></swiper-item>
    
    
    
    </swiper>
    <!-- 选项卡 End-->

    js

    data:{
      //选项卡
        currentData: 0,
    }
    /**
     * tab切换
     */
    //swiper切换时会调用
    //获取当前滑块的index
    bindchange: function (e) {
    
        var index = e.detail.current;
        // console.log("滑动"+index)
    
        this.setData({
            currentData: e.detail.current,
    
        })
    },
    //点击切换,滑块index赋值
    checkCurrent: function (e) {
        var index = e.target.dataset.current;
        if (this.data.currentData === e.target.dataset.current) {
            return false;
        } else {
            this.setData({
                currentData: e.target.dataset.current,
    
            })
        }
        // console.log("点击" + index)
    },

    css 这部分不重要 

    .title {width:100%;height:88rpx;background: white;display:flex;align-items:center;justify-content: space-around;}
    .topTabSwiper{height:50rpx;font-size:26rpx;margin-bottom:20rpx;padding:0 40rpx;}
    .topTabSwiper:after{content: ""; clear: both;display: block;}
    .tabbox{float:left; width:20%;text-align:center; }
    .tab{display:block;height:50rpx;line-height:50rpx;width:80%;border-radius:25rpx;color:#292b33;margin:0 auto;}
    .tabBorer {color:#fff;background: -webkit-linear-gradient(left,#ffc20d ,#ffad00); 
    background: -o-linear-gradient(left, #ffc20d ,#ffad00);
    background: -moz-linear-gradient(left, #ffc20d ,#ffad00); 
    background: linear-gradient(to right, #ffc20d ,#ffad00);}
    .topTabSwiper .swiper{width:100%;}
    .swiper_con{width:100%;height: 100%;}

    我的接口数据格式(供参考),循环里套循环取出数据

    最终效果

     

    第二种,只点击

    <view class="swiper-tab">
    <!-- 从接口取数据
    	<view  class="tabbox" wx:for="{{detail_data.copywriting}}" wx:key="index">
    		<text class="swiper-tab-item {{currentTab== index ?'active':''}}" data-current="{{index}}" bindtap="clickTab">{{item.title}}</text>
    	</view>
    -->
    
    	<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">菜单一</view>
    	<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">菜单二</view>
    
    
    </view>
    
    <!--从接口取数据
    <view wx:for="{{detail_data.copywriting}}" wx:key="index" class = "{{currentTab == index ? 'show':'hidden'}}" >
    	<scroll-view>
    
    		<view class="adrss_box" wx:for="{{item.detailmessage}}" wx:for-item="cell" wx:key="index">
    		{{cell.title.titlestr}}
    		</view>
    
    	</scroll-view>
    </view>
    -->
    
    <view class = "{{currentTab == 0 ? 'show':'hidden'}}" >
    	<scroll-view><text>内容2</text></scroll-view>
    </view>
    <view class = "{{currentTab == 1 ? 'show':'hidden'}}">
    	<scroll-view><text>内容3</text></scroll-view>
    </view> 

    js

    dada:{
    currentTab:0,
    }
    
    //点击切换
    clickTab: function (e) {
        var that = this;
        if (this.data.currentTab === e.target.dataset.current) {
            return false;
        } else {
            that.setData({
                currentTab: e.target.dataset.current,
            })
        }
    },

    json格式、样式都与第一种一样

     

     

     

     

     

     

     

     

    展开全文
  • 其实我之前写过一篇选项卡的切换demo,大家阔以参考一下 小程序多个选项卡切换 那今天写这个demo呢,是因为项目需求,所以仅供参考。 我是拿到了home.wxml的数组下标, 通过url传参的方式去将这个id传到下一个页面,...
  • 父级高度为0,子元素全部不显示,查看原因,是因为swiper默认为position:absolute,定位导致的,所以需要在style上计算出他当前的高度并且渲染在页面上,另一个问题是,当前的高度默认为px,而小程序支持的是rpx,...
  • 这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法效果如图:wxml:<view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem">
  • 如图所示一个,具体步骤如下: 一、wxml部分 点人 ...现在呈现的效果就是如上图所示,但是高度是swiper组件的默认150px,无法撑开高度,这个时候就要去计算高度...这样一个高度自适应的swiper选项卡就做好了。
  • /* 选中时选项卡下边框的样式 */ } /* 2.选项卡下方的内容 */ .swiper-box { position: absolute ; /* 使用绝对定位 */ top: 10 ; /* 距离上边距:0px */ left: 40px ; /* 距离左边距:80px *...
  • /* 选中时选项卡下边框的样式 */ } /* 2.选项卡下方的内容 */ .swiper-box { position: absolute ; /* 使用绝对定位 */ top: 10 ; /* 距离上边距:0px */ left: 40px ; /* 距离左边距:80px *...
  • 首先:个人感觉这是小程序的一个bug(相信以后会修复的),默认高度是150px,而且不能通过css控制让高度自适应(就是给高一个auto,在这里不起作用!!!),百度了好多方法,觉得有用的是给swiper加个固定高100vh(数据...
  • 微信小程序 tab 顶部选项卡下载

    千次下载 热门讨论 2016-12-01 12:33:06
    微信小程序 tab 顶部选项卡
  • 微信小程序设置底部tab选项卡

    万次阅读 2018-06-05 13:54:11
    微信小程序选项卡用到tabbar组件。在app.json中添加tabbar组件即可。(输入会自动补全)list存放的就是tab选项卡了。一个对象就是一个选项卡,官方规定为2到5个。text是文本提示,下面两个是没选中时显示的图标与...
  • 微信小程序选项卡

    万次阅读 2016-11-18 11:33:10
    从事前端的同学们一定不会对选项卡陌生,不管是自己原生写的,还是各个UI框架里带的,我想大家都使用过很多选项卡,对选项卡的原理也足够清楚了,下面我们来在微信小程序里实现选项卡的功能。微信小程序里没有自带...
  • 小程序页面顶部选项卡效果

    千次阅读 2018-04-17 01:07:23
    小程序页面顶部选项卡效果
  • 选项卡在我们的日常开发中,使用的还是蛮多的,但是微信小程序中却没有直接提供选项卡组件,不过我们可以变通通过 scroll-view 和 swiper 组件来实现一个选项卡的功能。 需求: 实现一个选项卡选项卡的标题可能...
  • 微信小程序选项卡

    千次阅读 2017-05-21 23:31:33
    我们接着上一篇写 为首页添加一个选项卡看下效果 代码:home.wxml<!--pages/home/home.wxml--> <view class="swiper-tab"> 热门</vie
  • 小程序 ——选项卡切换

    千次阅读 2018-05-01 16:25:38
    经常使用,供下次参考。哈哈哈……欢迎补充哈!!! 效果:wxml 代码:js 代码:wxss 代码:
  • 2.循环法(适用于通过后台数据进行操作的选项卡) <!--index.wxml--> {{item}} [curIndex].index1}}" wx:for-index='index' data-index='{{index}}' > {{item}} /**index.wxss**...
  • 微信小程序顶部选项卡

    千次阅读 2018-03-14 17:07:49
    顶部选项卡之前在做Android的时候,在实现顶部选项卡运用了TabLayout+Fragment(跳转)最近看了大量的小程序案列,也仿写了一点点东西关于顶部选项卡借鉴案例实例图index.wxml&lt;loading hidden="{{hidden...
  • 先写页面,在wxml使用swiper轮播图可实现选项卡功能(这部分我也是参考了网上的伙伴的分享)。 <view class='topTabSwiper'> <block wx:for="{{navlist}}" wx:key="index"> <view class='tab {{...
  • 微信小程序滑动切换选项卡

    千次阅读 2018-10-16 18:03:25
    微信小程序使用&lt;swiper&gt;&lt;/swiper&gt;实现滑动切换 wxml代码: &lt;swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{...
  • 微信小程序滚动居中导航选项卡

    千次阅读 2019-02-11 16:33:36
    微信小程序头部导航经常会用到选项卡,一个会自动居中的选项卡的体验会比普通的选项卡要好很多。 效果示意图: 被选中的tab会始终居中显示。 利用微信小程序自带的组件scroll-view的scroll-left就很容易实现...
  • 微信小程序底部选项卡/导航栏的实现方法! 不过还是总结的说,就不说我经历了什么了。。 首先,在历经我一系列改革之后写出来的代码//nav_tp.wxml <navigator wx:for="{{navbar}}" data-idx="{{index}}

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 173,906
精华内容 69,562
关键字:

小程序选项卡