Компонент формы апплета WeChat, который вы с нетерпением ждете, находится здесь

Апплет WeChat
Компонент формы апплета WeChat, который вы с нетерпением ждете, находится здесь

Компонент формы апплета WeChat, который вы с нетерпением ждете, находится здесь

задний план

Таблица — самая распространенная метка в разработке H5, но такой полезной метки нет в апплете WeChat, беспомощный, вздох, отчаяние! ! !

Преследуя цель принести пользу стране и обезьяне, я, наконец, начал строить колеса.

Функция

В основном используется для отображения больших объемов структурированных данных.

Поддержка разбивки на страницы, пользовательских операций, длинной и широкой прокрутки таблиц и других функций.

выполнить

предисловие

  • Выставляйте необходимые свойства, такие как заголовки, данные.
  • Поддержка внешних таблиц управления стилями.
  • Список на мобильном телефоне относительно невелик, и пока нет необходимости выставлять события напоказ.

деталь

Component({
  properties: {
       list: {  // 表格数据
      type: Array,
      value: []
    },
    headers: {  //表头
      type: Array,
      value: []
    },
    hasBorder: {  // 表格中间边框
      type: String,
      value: "no"
    },
      height: { //table的高度
      type: Number || String,
      value: ''
    },
    width: {
      type: Number,
      value: 0
    },
    tdWidth: {
      type: Number,
      value: 35
    }
      
  }
})



/*
s-class-header // 外部定义表头样式

s-class-row  // 外部定义行数据样式

*/


Component({
  externalClasses: ['s-class-header', 's-class-row']
})
  • Файл index.wxml динамически отображает таблицу с помощью вложенных циклов.

<view class="table table-noborder">
    <view class="tr thead s-class-header">
      <view wx:for="{{headers}}" class="td td-{{hasBorder}}border">{{item.display}}</view>
    
    </view>
    <block wx:for-item='i' wx:for="{{list}}">
      <view class="tr s-class-row">
        <view wx:for-item='j' wx:for="{{headers}}" class="td td-{{hasBorder}}border">{{i[j['text']]}}</view>        
      </view>
    </block>
  </view>
  • index.wxss Пользователи могут изменять исходный код файла index.wxss для очень индивидуальных стилей.

.table {
  border: 1px solid #ccc;
  font-size: 28rpx;
  background: #fff;  
  border-right:none;
}
.table-noborder {
  border-right:1rpx solid #ccc;
}
 
.tr{
  display: flex;
}
 
.td {
  text-align: center;
  border: 1px solid #ccc;
  display: inline-block;  
  border-bottom: none;
  flex: 1;
  padding: 16rpx;  
  border-left: none;
}
.td-noborder{  
  border-right: none;
}
 
.thead .td{
  border-top: none;
  padding: 16rpx;
  font-weight: bold;
}

Начать быстро

Файл .json представляет компоненты

 {
  "usingComponents": {
    "s-table": "实际路径/table/index"
  }
}

В файле index.wxml используются компоненты

<s-table hasBorder='no' width='200' tdWidth='100' height='200' s-class-header='my-class' s-class-row='my-class-row' headers='{{headers}}' list='{{row}}'></s-table>

Полный исходный код и инструкции по использованию см. на github.

гитхаб-адрес

Постоянно обновляются все более качественные компоненты...

насчет нас

Передовая команда Kuaigou Taxi занимается обменом передовыми технологиями и регулярно публикует высококачественные статьи. Добро пожаловать, обратите внимание и лайкните. Статья будет опубликована в паблике одновременно, если вы хотите получать актуальную информацию как можно быстрее, просто отсканируйте ее!

image

Категории