微信小程序自定義可滑動(dòng)的tab切換
本文實(shí)例為大家分享了微信小程序自定義tab切換(可滑動(dòng)),供大家參考,具體內(nèi)容如下
自定義tab切換(可滑動(dòng))
<!--components/warn/warn.wxml--> <view class="menu"> ? <navigator wx:for="{{shouye}}" wx:key="index" bindtap="change" class="{{page==index?'font-white':'font-black'}}" data-pageid="{{index}}">{{item}}</navigator> ? <!-- <view class="order-desc">按排名升序</view> --> </view> <swiper current='{{page}}' bindchange="changepage"> ? <swiper-item wx:for="{{shouye}}" wx:key="index"> ? ? <view class="view1"> ? ? ? <view class="table"> ? ? ? ? <view class="tr"> ? ? ? ? ? <view class="th">產(chǎn)品編號(hào)</view> ? ? ? ? ? <view class="th">當(dāng)前庫(kù)存</view> ? ? ? ? ? <view class="th">按時(shí)間倒序</view> ? ? ? ? </view> ? ? ? ? <block wx:for="{{saleData}}" wx:key="index"> ? ? ? ? ? <view class="tr bg-f3f4f4"> ? ? ? ? ? ? <view class="td">{{item.prodCode}}</view> ? ? ? ? ? ? <view class="td">{{item.proName}}</view> ? ? ? ? ? ? <view class="td">{{item.time}}</view> ? ? ? ? ? </view> ? ? ? ? </block> ? ? ? ? <view class="all-tabledata">查看全部</view> ? ? ? </view> ? ? </view> ? </swiper-item> </swiper>
// components/warn/warn.js Component({ ? ? /** ? ? ?* 組件的屬性列表 ? ? ?*/ ? ? properties: { ? ? }, ? ? /** ? ? ?* 組件的初始數(shù)據(jù) ? ? ?*/ ? ? data: { ? ? ? ? shouye: ['未處理', '已處理'], ? ? ? ? page: 0, ? ? ? ? saleData:[ ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? ? prodCode:38749237093280, ? ? ? ? ? ? ? proName:'1000', ? ? ? ? ? ? ? time:'2021-12-12 14:00' ? ? ? ? ? } ? ? ? ] ? ? ? }, ? ? /** ? ? ?* 組件的方法列表 ? ? ?*/ ? ? methods: { ? ? ? ? change: function (event) { ? ? ? ? ? ? var a = event.currentTarget.dataset.pageid ? ? ? ? ? ? this.setData({ ? ? ? ? ? ? ? page: a ? ? ? ? ? ? }) ? ? ? ? ? }, ? ? ? ? ? changepage: function (event) { ? ? ? ? ? ? console.log(event) ? ? ? ? ? ? var a = event.detail.current ? ? ? ? ? ? this.setData({ ? ? ? ? ? ? ? page: a ? ? ? ? ? ? }) ? ? ? ? ? }, ? ? } })
/* components/warn/warn.wxss */ scroll-view{ ? ? width: 100%; ? ? height: 100%; ? ? display: flex; ? } ? .menu{ ? ? /* background-color: red; ? ? display: flex; ? ? height: 60rpx; ? ? font-size: 40rpx; ? ? line-height: 70rpx; ? ? flex-direction: row; ? ? justify-content: space-around; */ ? ? width: 100%; ? ? height: 10%; ? ? background: white; ? ? display: flex; ? ? align-items: center; ? ? justify-content: space-around; ? } ? .font-white{ ? ? display: flex; ? ? flex-direction: column; ? ? align-items: center; ? ? color: #FFFFFF; ? ? background: #197FF0; ? ? font-size: 16px; ? ? font-family: PingFang SC; ? ? font-weight: 400; ? ? width: 200rpx; ? ? height: 60rpx; ? ? line-height: 60rpx; ? ? opacity: 1; ? ? border-radius: 34rpx; ? } ? .font-black{ ? ? display: flex; ? ? flex-direction: column; ? ? align-items: center; ? ? font-size: 16px; ? ? font-family: PingFang SC; ? ? font-weight: 400; ? ? color: #041320; ? ? width: 200rpx; ? ? height: 60rpx; ? ? line-height: 60rpx; ? ? background: #F6F6F6; ? ? opacity: 1; ? ? border-radius: 34rpx; ? } ? .view1{ ? ? height: 100%; ? ? overflow-y: auto; ? } ? swiper { ? ? /* width: 100%; */ ? ? height: 90%; ? ? overflow-y: auto; ? ? /* margin: 0 auto; */ ? } ? /* 表格 */ ? .tr{ ? ? width: 100%; ? display: flex; ? /* justify-content: space-around; ? ? */ } .bg-f3f4f4{ ? ? ? margin-bottom: 20rpx; ? ? background:rgba(28, 41, 53,0.05) } .tr>.th:nth-child(1),.tr>.td:nth-child(1){ ? ? width: 40%; ? ? text-align: center; } .tr>.th:nth-child(2),.tr>.td:nth-child(2){ ? ? width: 20%; ? ? text-align: center; } .tr>.th:nth-child(3),.tr>.td:nth-child(3){ ? ? width: 40%; ? ? text-align: center; } .th,.td{ ? font-size: 28rpx; ? font-family: PingFang SC; ? font-weight: 400; ? line-height:80rpx; ? color: #041320; } .all-tabledata{ ? font-size: 24rpx; ? font-family: PingFang SC; ? font-weight: 400; ? height: 40rpx; ? line-height:30rpx; ? color: #187EEF; ? text-align: center; ? margin: 40rpx 0; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
對(duì)layui數(shù)據(jù)表格動(dòng)態(tài)cols(字段)動(dòng)態(tài)變化詳解
今天小編就為大家分享一篇對(duì)layui數(shù)據(jù)表格動(dòng)態(tài)cols(字段)動(dòng)態(tài)變化詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-10-10js判斷鼠標(biāo)左、中、右鍵哪個(gè)被點(diǎn)擊的方法
這篇文章主要介紹了js判斷鼠標(biāo)左、中、右鍵哪個(gè)被點(diǎn)擊的方法,主要通過event.button事件來(lái)判斷鼠標(biāo)點(diǎn)擊的類型,需要的朋友可以參考下2015-01-01Webpack4+Babel7+ES6兼容IE8的實(shí)現(xiàn)
這篇文章主要介紹了Webpack4+Babel7+ES6兼容IE8的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04JS控制阿拉伯?dāng)?shù)字轉(zhuǎn)為中文大寫示例代碼
阿拉伯?dāng)?shù)字如何轉(zhuǎn)為中文大寫這個(gè)實(shí)現(xiàn)的方法有很多,在本文將為大家介紹下js中時(shí)如何實(shí)現(xiàn)的,感興趣的朋友可以參考下2013-09-09分享JavaScript獲取網(wǎng)頁(yè)關(guān)閉與取消關(guān)閉的事件
這篇文章主要介紹了JavaScript獲取網(wǎng)頁(yè)關(guān)閉與取消關(guān)閉的事件,有需要的朋友可以參考一下2013-12-12網(wǎng)頁(yè)禁止鼠標(biāo)左右鍵功能的簡(jiǎn)單代碼
本篇文章介紹與演示網(wǎng)頁(yè)禁止鼠標(biāo)左右鍵的實(shí)例代碼,需要的朋友可以參考一下2013-06-06微信小程序?qū)崿F(xiàn)的一鍵復(fù)制功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的一鍵復(fù)制功能,結(jié)合實(shí)例形式分析了微信小程序wx.setClipboardData接口實(shí)現(xiàn)操作粘貼板進(jìn)行復(fù)制操作的相關(guān)使用技巧,需要的朋友可以參考下2019-04-04