js實(shí)現(xiàn)移動(dòng)端簡(jiǎn)易滑動(dòng)表格
本文實(shí)例為大家分享了js實(shí)現(xiàn)移動(dòng)端簡(jiǎn)易滑動(dòng)表格的具體代碼,供大家參考,具體內(nèi)容如下
上js文件代碼
<template> ? <view> ? ? <scroll-view scroll-x="true" class="scroll-table"> ? ? ? <view class="scroll-tr"> ? ? ? ? <view class="cus-tr cus-th" style="background: #fff"> ? ? ? ? ? <view class="cus-td" v-for="(item, i) in thList" :key="i">{{ ? ? ? ? ? ? item ? ? ? ? ? }}</view> ? ? ? ? </view> ? ? ? ? <!-- 這里會(huì)自動(dòng)遍歷出對(duì)象數(shù)組中的數(shù)據(jù) --> ? ? ? ? <view v-if="!useCusTdList"> ? ? ? ? ? <view class="cus-tr" v-for="(item, n) in tdData" :key="n"> ? ? ? ? ? ? <view class="cus-td" v-for="(val, key, i) in item" :key="i + n">{{ ? ? ? ? ? ? ? val ? ? ? ? ? ? }}</view> ? ? ? ? ? </view> ? ? ? ? </view> ? ? ? ? <!-- 這里會(huì)使用tdList中定義的字段的數(shù)據(jù) --> ? ? ? ? <view v-if="useCusTdList"> ? ? ? ? ? <view class="cus-tr" v-for="(item, n) in tdData" :key="n"> ? ? ? ? ? ? <view class="cus-td" v-for="(tdName, i) in tdList" :key="i + n"> ? ? ? ? ? ? ? <view v-if="!slotData">{{ item[tdName] }}</view> ? ? ? ? ? ? ? <view v-else> ? ? ? ? ? ? ? ? <slot ? ? ? ? ? ? ? ? ? name="scoped" ? ? ? ? ? ? ? ? ? :row="{ value: item[tdName], key: tdName }" ? ? ? ? ? ? ? ? ></slot> ? ? ? ? ? ? ? </view> ? ? ? ? ? ? </view> ? ? ? ? ? </view> ? ? ? ? </view> ? ? ? </view> ? ? ? <!-- 撐開空間,防止最后一行的下邊框無法顯示 --> ? ? ? <view style="height: 2rpx"></view> ? ? </scroll-view> ? </view> </template> <script> ? export default { ? ? name: 'CusTable', ? ? props: { ? ? ? thList: { ? ? ? ? type: Array, ? ? ? ? default: function () { ? ? ? ? ? return [] ? ? ? ? } ? ? ? }, ? ? ? tdList: { ? ? ? ? type: Array, ? ? ? ? default: function () { ? ? ? ? ? return [] ? ? ? ? } ? ? ? }, ? ? ? tdData: { ? ? ? ? type: Array, ? ? ? ? default: function () { ? ? ? ? ? return [] ? ? ? ? } ? ? ? }, ? ? ? useCusTdList: { ? ? ? ? useCusTdList: Boolean, ? ? ? ? default: false ? ? ? }, ? ? ? slotData: { //是否使用插槽 ? ? ? ? useCusTdList: Boolean, ? ? ? ? default: false ? ? ? } ? ? }, ? ? data() { ? ? ? return {} ? ? }, ? ? methods: {} ? } </script> <style lang="scss"> ? /*scroll-view樣式*/ ? .scroll-table { ? ? min-height: 100rpx; ? ? white-space: nowrap; ? ? // padding: 10rpx 20rpx; ? ? // margin-top: 30rpx; ? ? padding-bottom: 60rpx; ? ? .scroll-tr { ? ? ? min-width: 750rpx; ? ? ? display: inline-block; ? ? ? /*表頭樣式*/ ? ? ? .cus-th { ? ? ? ? background-color: #f3f3f3; ? ? ? } ? ? ? /*行樣式*/ ? ? ? .cus-tr { ? ? ? ? box-sizing: border-box; ? ? ? ? display: flex; ? ? ? ? flex-direction: row; ? ? ? ? flex-wrap: nowrap; ? ? ? ? justify-content: flex-start; ? ? ? ? align-items: stretch; ? ? ? ? align-content: center; ? ? ? ? height: 100%; ? ? ? ? /*設(shè)置邊框*/ ? ? ? ? border-color: #ccc; ? ? ? ? border-style: solid; ? ? ? ? border-width: 0; ? ? ? ? border-top-width: 1px; ? ? ? ? border-left-width: 1px; ? ? ? ? border-bottom-width: 1px; ? ? ? ? color: #333; ? ? ? ? + .cus-tr { ? ? ? ? ? border-top-style: none; ? ? ? ? } ? ? ? ? /*表格樣式*/ ? ? ? ? .cus-td { ? ? ? ? ? width: 220rpx; ? ? ? ? ? box-sizing: border-box; ? ? ? ? ? padding: 1px; ? ? ? ? ? font-size: 25rpx; ? ? ? ? ? word-break: break-all; ? ? ? ? ? border-color: #ccc; ? ? ? ? ? border-style: solid; ? ? ? ? ? border-width: 0; ? ? ? ? ? border-right-width: 1px; ? ? ? ? ? min-height: 60rpx; ? ? ? ? ? white-space: pre-wrap; ? ? ? ? ? word-wrap: break-word; ? ? ? ? ? /**/ ? ? ? ? ? display: flex; ? ? ? ? ? justify-content: center; //左右居中 ? ? ? ? ? align-items: center; //上下居中 ? ? ? ? ? /* 跨列 */ ? ? ? ? ? &-colspan { ? ? ? ? ? ? flex-grow: 1; ? ? ? ? ? ? width: 0; ? ? ? ? ? } ? ? ? ? ? /* 內(nèi)容頂部對(duì)齊 */ ? ? ? ? ? &-top { ? ? ? ? ? ? align-items: flex-start; ? ? ? ? ? ? align-content: flex-start; ? ? ? ? ? } ? ? ? ? ? /* 內(nèi)容底部對(duì)齊 */ ? ? ? ? ? &-bottom { ? ? ? ? ? ? align-items: flex-end; ? ? ? ? ? ? align-content: flex-end; ? ? ? ? ? } ? ? ? ? ? /* 內(nèi)容左邊對(duì)齊 */ ? ? ? ? ? &-left { ? ? ? ? ? ? justify-content: flex-start; ? ? ? ? ? } ? ? ? ? ? /* 內(nèi)容右邊對(duì)齊 */ ? ? ? ? ? &-right { ? ? ? ? ? ? justify-content: flex-end; ? ? ? ? ? } ? ? ? ? } ? ? ? } ? ? } ? } </style>
使用方式
<tableS ? ?:thList="thList" ? ?:tdList="tdList" ? ?:tdData="tdData" ? ?:useCusTdList="false" //控制是否更具對(duì)應(yīng)字段賦值 ?/> // 或者使用插槽 ? ? ?<tableS ? ? ? ?:thList="thList" ? ? ? ?:tdList="tdList" ? ? ? ?:tdData="dataList" ? ? ? ?:useCusTdList="true" ? ? ? ?:slotData="true" ? ? ?> ? ? ? ?<!-- 加插槽 --> ? ? ? ?<template v-slot:scoped="{ row }"> ? ? ? ? ?<view v-if="row.key === 'jiage'">-</view> ? ? ? ? ?<view v-else>{{ row.value }}</view> ? ? ? ?</template> ? ? ?</tableS> ?? ?thList: ['姓名', '年齡', '性別', '性別', '性別'], //表頭 ?tdList: ['name', 'age', 'sex'], //自定義屬性名(要把useCusTdList變成true 如果為false ?就是按數(shù)組順序賦值) ?tdData: [{ name: '張三', age: '18', sex: '男' }],
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js Canvas實(shí)現(xiàn)圓形時(shí)鐘教程
這篇文章主要為大家詳細(xì)介紹了HTML5 Canvas實(shí)現(xiàn)圓形時(shí)鐘簡(jiǎn)易教程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09js實(shí)現(xiàn)點(diǎn)擊向下展開的下拉菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊向下展開的下拉菜單效果代碼,涉及javascript鼠標(biāo)事件控制頁面元素樣式變換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09分享12個(gè)非常實(shí)用的JavaScript小技巧
這篇文章主要介紹了分享12個(gè)非常實(shí)用的JavaScript小技巧,這些小技巧可能在你的實(shí)際工作中或許能幫助你解決一些問題,需要的朋友可以參考下2016-05-05簡(jiǎn)單了解微信小程序的目錄結(jié)構(gòu)
這篇文章主要介紹了簡(jiǎn)單了解小程序的目錄結(jié)構(gòu),在開發(fā)小程序之前,我們首先需要對(duì)其目錄結(jié)構(gòu)進(jìn)行了解,以便于提升開發(fā)效率,需要的朋友可以參考下2019-07-07javascript網(wǎng)頁隨機(jī)點(diǎn)名實(shí)現(xiàn)過程解析
這篇文章主要介紹了javascript實(shí)現(xiàn)網(wǎng)頁隨機(jī)變色及實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10Bootstrap彈出框modal上層的輸入框不能獲得焦點(diǎn)問題的解決方法
這篇文章主要介紹了Bootstrap彈出框modal上層的輸入框不能獲得焦點(diǎn)問題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12解讀CocosCreator源碼之引擎啟動(dòng)與主循環(huán)
這篇文章主要介紹了CocosCreator源碼解讀之引擎啟動(dòng)與主循環(huán),對(duì)CocosCreator感興趣的同學(xué),可以研究參考一下2021-04-04