feat: 基础版本

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1 @@
+dist/*

.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  root: true,
+  globals: { wx: true },
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.wpy files
+  plugins: [
+    'html'
+  ],
+  settings: {
+    'html/html-extensions': ['.html', '.wpy']
+  },
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'space-before-function-paren': 0
+  }
+}

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.DS_Store
+.wepycache

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

.wepyignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.DS_Store
+*.wpy___jb_tmp___

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "my-table",
+  "version": "0.0.2",
+  "description": "A WePY project",
+  "main": "dist/app.js",
+  "scripts": {
+    "dev": "wepy build --watch",
+    "build": "cross-env NODE_ENV=production wepy build --no-cache",
+    "dev:web": "wepy build --output web",
+    "clean": "find ./dist -maxdepth 1 -not -name 'project.config.json' -not -name 'dist' | xargs rm -rf",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "wepy": {
+    "module-a": false,
+    "./src/components/list": "./src/components/wepy-list.wpy"
+  },
+  "author": "jianchaoliu <jianchaoliu@webot.co>",
+  "license": "MIT",
+  "dependencies": {
+    "wepy": "^1.7.2",
+    "wepy-async-function": "^1.4.4",
+    "wepy-com-toast": "^1.0.2"
+  },
+  "devDependencies": {
+    "babel-eslint": "^7.2.1",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "cross-env": "^5.1.3",
+    "eslint": "^3.18.0",
+    "eslint-config-standard": "^7.1.0",
+    "eslint-friendly-formatter": "^2.0.7",
+    "eslint-plugin-html": "^2.0.1",
+    "eslint-plugin-promise": "^3.5.0",
+    "eslint-plugin-standard": "^2.0.1",
+    "less": "^3.8.1",
+    "wepy-compiler-babel": "^1.5.1",
+    "wepy-compiler-less": "^1.3.10",
+    "wepy-compiler-sass": "^1.3.12",
+    "wepy-eslint": "^1.5.3"
+  }
+}

project.config.json

@@ -0,0 +1,16 @@
+{
+	"description": "A WePY project",
+	"setting": {
+		"urlCheck": true,
+		"es6": false,
+		"postcss": false,
+		"minified": false
+	},
+	"compileType": "miniprogram",
+	"appid": "wxd8ee4b9abd4be42c",
+	"projectname": "my-table",
+	"miniprogramRoot": "dist/",
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"condition": {}
+}

src/app.wpy

@@ -0,0 +1,26 @@
+<script>
+import wepy from 'wepy'
+import 'wepy-async-function'
+
+export default class extends wepy.app {
+  config = {
+    pages: [
+      'pages/index'
+    ],
+    window: {
+      backgroundTextStyle: 'light',
+      navigationBarBackgroundColor: '#fff',
+      navigationBarTitleText: 'WeChat',
+      navigationBarTextStyle: 'black'
+    }
+  }
+
+  constructor () {
+    super()
+    this.use('requestfix')
+  }
+
+  onLaunch() {
+  }
+}
+</script>

src/components/table.wpy

@@ -0,0 +1,195 @@
+<template>
+    <view class="table-fixed">
+        <!-- S 固定列 -->
+        <view class="table__fixed-columns">
+            <view class="table__fixed-common tr">
+                <view class="fixed-th th"
+                    wx:for="{{fixedCols[0]}}"
+                    wx:key="{{index}}"
+                    style="width: {{colWidths[index]}}rpx;">
+                    {{item}}
+                </view>
+            </view>
+            <scroll-view class="table__fixed-others"
+                scroll-y
+                scroll-top="{{scrollTop}}">
+                <view wx:for="{{firstColsOther}}"
+                    wx:for-item="row"
+                    wx:for-index="rowIndex"
+                    wx:key="{{rowIndex}}"
+                    class="tr">
+                    <view class="td"
+                        wx:for="{{row}}"
+                        wx:for-item="col"
+                        wx:for-index="colIndex"
+                        wx:key="{{colIndex}}"
+                        style="width: {{colWidths[colIndex]}}rpx;">
+                        {{col}}
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+        <!-- E 固定列 -->
+        <scroll-view class="table"
+            scroll-x>
+            <!-- S 固定表头 -->
+            <view class="thead"
+                style="width: {{totalWidth}}rpx;">
+                <view class="tr">
+                    <view class="th"
+                        wx:for="{{thead}}"
+                        wx:key="{{index}}"
+                        style="width: {{colWidths[index]}}rpx;">{{item}}</view>
+                </view>
+            </view>
+            <!-- E 固定表头 -->
+            <scroll-view class="tbody"
+                scroll-y
+                throttle="{{false}}"
+                @scroll="scrollVertical"
+                style="width: {{totalWidth}}rpx;">
+                <view class="tr"
+                    wx:for="{{tbody}}"
+                    wx:for-item="tr"
+                    wx:for-index="trIndex"
+                    wx:key="{{trIndex}}">
+                    <view class="td"
+                        wx:for="{{tr}}"
+                        wx:for-item="td"
+                        wx:for-index="tdIndex"
+                        wx:key="{{tdIndex}}"
+                        style="width: {{colWidths[tdIndex]}}rpx;">{{td}}</view>
+                </view>
+            </scroll-view>
+        </scroll-view>
+    </view>
+</template>
+
+<script>
+    import wepy from 'wepy'
+
+    const FAKE_DATA = [
+        ['保单年度', '年龄', '当年生存金', '累积生存金', '账户价值', '我是测试']
+    ]
+    const count = 100
+    const age = 30
+    for(let i = 0; i < count; i++) {
+        FAKE_DATA.push([
+            i,
+            age + i,
+            400,
+            500,
+            600,
+            700
+        ])
+    }
+
+    export default class Table extends wepy.component {
+        data = {
+            table: FAKE_DATA,
+            colWidths: [
+                160, 80, 200, 200, 160, 160
+            ],
+            fixedColsNum: 2,
+            scrollTop: 0
+        }
+        computed = {
+            totalWidth () {
+                let result = 0
+                this.colWidths.forEach(item => result += item)
+                return result
+            },
+            fixedCols () {
+                const result = []
+                this.table.forEach(row => {
+                    result.push(row
+                        .slice(0, this.fixedColsNum)
+                        .map(col => col))
+                })
+                return result
+            },
+            firstColsOther () {
+                return this.fixedCols.slice(1)
+            },
+            thead () {
+                return this.table[0]
+            },
+            tbody () {
+                return this.table.slice(1)
+            }
+        }
+        methods = {
+            scrollVertical (event) {
+                const scrollTop = event.detail.scrollTop
+                this.scrollTop = scrollTop
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .table-fixed {
+        position: relative;
+        overflow: hidden;
+    }
+
+    .table__fixed-columns {
+        position: absolute;
+        left: 0;
+        background-color: #fff;
+        z-index: 100;
+        pointer-events: none;
+    }
+
+    .table__fixed-others {
+        height: 400rpx;
+    }
+
+    .table {
+        width: 750rpx;
+    }
+
+    .tbody {
+        height: 400rpx;
+    }
+
+    .tr {
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 0;
+
+        &:nth-child(even) {
+            background-color: #FAFAFA;
+        }
+    }
+
+    $borderColor: #E6E6E6;
+
+    .td,
+    .th {
+        box-sizing: border-box;
+        text-align: center;
+        display: inline-block;
+        color: #666;
+        border-right: 1px solid $borderColor;
+        border-bottom: 1px solid $borderColor;
+
+        &:first-child {
+            border-left: 1px solid $borderColor;
+        }
+    }
+
+    .th {
+        font-size: 24rpx;
+        line-height: 34rpx;
+        padding: 6rpx 0;
+        border-top: 1px solid $borderColor;
+    }
+
+    .td {
+        font-size: 28rpx;
+        line-height: 40rpx;
+        padding: 16rpx 0;
+    }
+
+</style>

src/index.template.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="format-detection" content="telephone=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta content="telephone=no" name="format-detection">
+
+  <title>转 WEB DEMO</title>
+  <style>
+      html, body, #app {height: 100%;}
+  </style>
+</head>
+<body>
+  <div id="app">
+    <router-view></router-view>
+    <script src="./index.js"></script>
+  </div>
+</body>
+</html>

src/mixins/test.js

@@ -0,0 +1,21 @@
+import wepy from 'wepy'
+
+export default class testMixin extends wepy.mixin {
+  data = {
+    mixin: 'This is mixin data.'
+  }
+  methods = {
+    tap () {
+      this.mixin = 'mixin data was changed'
+      console.log('mixin method tap')
+    }
+  }
+
+  onShow() {
+    console.log('mixin onShow')
+  }
+
+  onLoad() {
+    console.log('mixin onLoad')
+  }
+}

src/pages/index.wpy

@@ -0,0 +1,39 @@
+<template>
+  <view class="container">
+    <table></table>
+  </view>
+</template>
+
+<script>
+  import wepy from 'wepy'
+  import table from '../components/table'
+
+  export default class Index extends wepy.page {
+    config = {
+      navigationBarTitleText: 'test'
+    }
+    components = {
+        table
+    }
+
+    mixins = []
+
+    data = {
+    }
+
+    computed = {
+    }
+
+    methods = {
+
+    }
+
+    events = {
+
+    }
+
+    onLoad() {
+
+    }
+  }
+</script>

wepy.config.js

@@ -0,0 +1,73 @@
+const path = require('path')
+var prod = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  wpyExt: '.wpy',
+  eslint: true,
+  cliLogs: !prod,
+  build: {
+    web: {
+      htmlTemplate: path.join('src', 'index.template.html'),
+      htmlOutput: path.join('web', 'index.html'),
+      jsOutput: path.join('web', 'index.js')
+    }
+  },
+  resolve: {
+    alias: {
+      counter: path.join(__dirname, 'src/components/counter'),
+      '@': path.join(__dirname, 'src')
+    },
+    aliasFields: ['wepy', 'weapp'],
+    modules: ['node_modules']
+  },
+  compilers: {
+    less: {
+      compress: prod
+    },
+    sass: {
+      outputStyle: 'compressed'
+    },
+    babel: {
+      sourceMap: true,
+      presets: [
+        'env'
+      ],
+      plugins: [
+        'transform-class-properties',
+        'transform-decorators-legacy',
+        'transform-object-rest-spread',
+        'transform-export-extensions'
+      ]
+    }
+  },
+  plugins: {
+  },
+  appConfig: {
+    noPromiseAPI: ['createSelectorQuery']
+  }
+}
+
+if (prod) {
+  // 压缩sass
+  // module.exports.compilers['sass'] = {outputStyle: 'compressed'}
+
+  // 压缩js
+  module.exports.plugins = {
+    uglifyjs: {
+      filter: /\.js$/,
+      config: {
+      }
+    },
+    imagemin: {
+      filter: /\.(jpg|png|jpeg)$/,
+      config: {
+        jpg: {
+          quality: 80
+        },
+        png: {
+          quality: 80
+        }
+      }
+    }
+  }
+}