国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

  微信小程序自定義可滑動(dòng)的tab切換

3403771864 / 388人閱讀

  在開發(fā)項(xiàng)目中,要實(shí)現(xiàn)微信小程序自定義可滑動(dòng)的tab切換。

  下面就是自定義tab切換(可滑動(dòng))

</>復(fù)制代碼

  1.   <!--components/warn/warn.wxml-->
  2.   <view class="menu">
  3.   <navigator wx:for="{{shouye}}" wx:key="index" bindtap="change" class="{{page==index?'font-white':'font-black'}}" data-pageid="{{index}}">{{item}}</navigator>
  4.   <!-- <view class="order-desc">按排名升序</view> -->
  5.   </view>
  6.   <swiper current='{{page}}' bindchange="changepage">
  7.   <swiper-item wx:for="{{shouye}}" wx:key="index">
  8.   <view class="view1">
  9.   <view class="table">
  10.   <view class="tr">
  11.   <view class="th">產(chǎn)品編號</view>
  12.   <view class="th">當(dāng)前庫存</view>
  13.   <view class="th">按時(shí)間倒序</view>
  14.   </view>
  15.   <block wx:for="{{saleData}}" wx:key="index">
  16.   <view class="tr bg-f3f4f4">
  17.   <view class="td">{{item.prodCode}}</view>
  18.   <view class="td">{{item.proName}}</view>
  19.   <view class="td">{{item.time}}</view>
  20.   </view>
  21.   </block>
  22.   <view class="all-tabledata">查看全部</view>
  23.   </view>
  24.   </view>
  25.   </swiper-item>
  26.   </swiper>


</>復(fù)制代碼

  1.   // components/warn/warn.js
  2.   Component({
  3.   /**
  4.   * 組件的屬性列表
  5.   */
  6.   properties: {
  7.   },
  8.   /**
  9.   * 組件的初始數(shù)據(jù)
  10.   */
  11.   data: {
  12.   shouye: ['未處理''已處理'],
  13.   page: 0,
  14.   saleData:[
  15.   {
  16.   prodCode:38749237093280,
  17.   proName:'1000',
  18.   time:'2021-12-12 14:00'
  19.   },
  20.   {
  21.   prodCode:38749237093280,
  22.   proName:'1000',
  23.   time:'2021-12-12 14:00'
  24.   },
  25.   {
  26.   prodCode:38749237093280,
  27.   proName:'1000',
  28.   time:'2021-12-12 14:00'
  29.   },
  30.   {
  31.   prodCode:38749237093280,
  32.   proName:'1000',
  33.   time:'2021-12-12 14:00'
  34.   },
  35.   {
  36.   prodCode:38749237093280,
  37.   proName:'1000',
  38.   time:'2021-12-12 14:00'
  39.   },
  40.   {
  41.   prodCode:38749237093280,
  42.   proName:'1000',
  43.   time:'2021-12-12 14:00'
  44.   },
  45.   {
  46.   prodCode:38749237093280,
  47.   proName:'1000',
  48.   time:'2021-12-12 14:00'
  49.   },
  50.   {
  51.   prodCode:38749237093280,
  52.   proName:'1000',
  53.   time:'2021-12-12 14:00'
  54.   },
  55.   {
  56.   prodCode:38749237093280,
  57.   proName:'1000',
  58.   time:'2021-12-12 14:00'
  59.   },
  60.   {
  61.   prodCode:38749237093280,
  62.   proName:'1000',
  63.   time:'2021-12-12 14:00'
  64.   },
  65.   {
  66.   prodCode:38749237093280,
  67.   proName:'1000',
  68.   time:'2021-12-12 14:00'
  69.   },
  70.   {
  71.   prodCode:38749237093280,
  72.   proName:'1000',
  73.   time:'2021-12-12 14:00'
  74.   },
  75.   {
  76.   prodCode:38749237093280,
  77.   proName:'1000',
  78.   time:'2021-12-12 14:00'
  79.   },
  80.   {
  81.   prodCode:38749237093280,
  82.   proName:'1000',
  83.   time:'2021-12-12 14:00'
  84.   },
  85.   {
  86.   prodCode:38749237093280,
  87.   proName:'1000',
  88.   time:'2021-12-12 14:00'
  89.   }
  90.   ]
  91.   },
  92.   /**
  93.   * 組件的方法列表
  94.   */
  95.   methods: {
  96.   change: function (event{
  97.   var a = event.currentTarget.dataset.pageid
  98.   this.setData({
  99.   page: a
  100.   })
  101.   },
  102.   changepage: function (event{
  103.   console.log(event)
  104.   var a = event.detail.current
  105.   this.setData({

  page: a

  })

  },

  }

  })


</>復(fù)制代碼

  1.   /* components/warn/warn.wxss */
  2.   scroll-view{
  3.   width: 100%;
  4.   height: 100%;
  5.   display: flex;
  6.   }
  7.   .menu{
  8.   /* background-color: red;
  9.   display: flex;
  10.   height: 60rpx;
  11.   font-size: 40rpx;
  12.   line-height: 70rpx;
  13.   flex-direction: row;
  14.   justify-content: space-around; */
  15.   width: 100%;
  16.   height: 10%;
  17.   background: white;
  18.   display: flex;
  19.   align-items: center;
  20.   justify-content: space-around;
  21.   }
  22.   .font-white{
  23.   display: flex;
  24.   flex-direction: column;
  25.   align-items: center;
  26.   color: #FFFFFF;
  27.   background: #197FF0;
  28.   font-size: 16px;
  29.   font-family: PingFang SC;
  30.   font-weight: 400;
  31.   width: 200rpx;
  32.   height: 60rpx;
  33.   line-height: 60rpx;
  34.   opacity: 1;
  35.   border-radius: 34rpx;
  36.   }
  37.   .font-black{
  38.   display: flex;
  39.   flex-direction: column;
  40.   align-items: center;
  41.   font-size: 16px;
  42.   font-family: PingFang SC;
  43.   font-weight: 400;
  44.   color: #041320;
  45.   width: 200rpx;
  46.   height: 60rpx;
  47.   line-height: 60rpx;
  48.   background: #F6F6F6;
  49.   opacity: 1;
  50.   border-radius: 34rpx;
  51.   }
  52.   .view1{
  53.   height: 100%;
  54.   overflow-y: auto;
  55.   }
  56.   swiper {
  57.   /* width: 100%; */
  58.   height: 90%;
  59.   overflow-y: auto;
  60.   /* margin: 0 auto; */
  61.   }
  62.   /* 表格 */
  63.   .tr{
  64.   width: 100%;
  65.   display: flex;
  66.   /* justify-content: space-around; */
  67.   }
  68.   .bg-f3f4f4{
  69.   margin-bottom: 20rpx;
  70.   background:rgba(28, 41, 53,0.05)
  71.   }
  72.   .tr>.th:nth-child(1),.tr>.td:nth-child(1){
  73.   width: 40%;
  74.   text-align: center;
  75.   }
  76.   .tr>.th:nth-child(2),.tr>.td:nth-child(2){
  77.   width: 20%;
  78.   text-align: center;
  79.   }
  80.   .tr>.th:nth-child(3),.tr>.td:nth-child(3){
  81.   width: 40%;
  82.   text-align: center;
  83.   }
  84.   .th,.td{
  85.   font-size: 28rpx;
  86.   font-family: PingFang SC;
  87.   font-weight: 400;
  88.   line-height:80rpx;
  89.   color: #041320;
  90.   }
  91.   .all-tabledata{
  92.   font-size: 24rpx;
  93.   font-family: PingFang SC;
  94.   font-weight: 400;
  95.   height: 40rpx;
  96.   line-height:30rpx;
  97.   color: #187EEF;
  98.   text-align: center;
  99.   margin: 40rpx 0;
  100.   }

      內(nèi)容已講述完畢,請大家多多后續(xù)精彩內(nèi)容。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/127825.html

相關(guān)文章

  • 信小程序之選項(xiàng)卡

    摘要:我們在函數(shù)中通過獲取設(shè)備的寬高來設(shè)置組件高度以及高度為導(dǎo)航欄的高度點(diǎn)擊導(dǎo)航欄切換內(nèi)容點(diǎn)擊切換滑動(dòng)內(nèi)容切換導(dǎo)航欄滑動(dòng)切換可滾動(dòng)區(qū)域滾動(dòng)最底刷新數(shù)據(jù)頁面上拉觸底事件的處理函數(shù)更新列表一個(gè)漂亮的選項(xiàng)卡就完成了完整案例 選項(xiàng)卡隨處可見,微信小程序中也不例外,下面來寫一個(gè)簡單的小程序選項(xiàng)卡 思路 之前寫過基于swiper的選項(xiàng)卡,在小程序中有swiper組件,毫無疑問這里要用到swiper組件...

    stormjun 評論0 收藏0
  • 信小程序 bug 集中營

    摘要:利用這篇教程存儲一些常用的微信小程序開發(fā)技巧,方便查找。但是第一,微信小程序是國內(nèi)的,有中文文檔,雖然它的文檔說明有點(diǎn)坑,但好歹有文檔,閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們,如果覺得本文還不錯(cuò),記得給個(gè)...

    he_xd 評論0 收藏0
  • 信小程序 bug 集中營

    摘要:利用這篇教程存儲一些常用的微信小程序開發(fā)技巧,方便查找。但是第一,微信小程序是國內(nèi)的,有中文文檔,雖然它的文檔說明有點(diǎn)坑,但好歹有文檔,閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們,如果覺得本文還不錯(cuò),記得給個(gè)...

    PascalXie 評論0 收藏0
  • 信小程序 bug 集中營

    摘要:利用這篇教程存儲一些常用的微信小程序開發(fā)技巧,方便查找。但是第一,微信小程序是國內(nèi)的,有中文文檔,雖然它的文檔說明有點(diǎn)坑,但好歹有文檔,閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們,如果覺得本文還不錯(cuò),記得給個(gè)...

    lordharrd 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<