├── src ├── components │ ├── tab │ │ ├── tab.scss │ │ └── tab.js │ ├── head │ │ └── head.js │ └── foot │ │ └── foot.js ├── utils │ ├── x.json │ └── index.js ├── pages │ ├── component │ │ ├── pages │ │ │ ├── navigatePage │ │ │ │ ├── navigatePage.config.js │ │ │ │ └── navigatePage.js │ │ │ ├── redirectPage │ │ │ │ ├── redirectPage.config.js │ │ │ │ └── redirectPage.js │ │ │ ├── image │ │ │ │ ├── image.scss │ │ │ │ ├── image.config.js │ │ │ │ ├── nerv_logo.png │ │ │ │ └── image.js │ │ │ ├── video │ │ │ │ ├── video.scss │ │ │ │ ├── video.config.js │ │ │ │ └── video.js │ │ │ ├── camera │ │ │ │ ├── camera.scss │ │ │ │ ├── camera.config.js │ │ │ │ └── camera.js │ │ │ ├── map │ │ │ │ ├── map.config.js │ │ │ │ ├── map.scss │ │ │ │ └── map.js │ │ │ ├── form │ │ │ │ ├── form.config.js │ │ │ │ ├── form.scss │ │ │ │ └── form.js │ │ │ ├── icon │ │ │ │ ├── icon.config.js │ │ │ │ ├── icon.scss │ │ │ │ └── icon.js │ │ │ ├── text │ │ │ │ ├── text.config.js │ │ │ │ ├── text.scss │ │ │ │ └── text.js │ │ │ ├── view │ │ │ │ ├── view.config.js │ │ │ │ ├── view.scss │ │ │ │ └── view.js │ │ │ ├── audio │ │ │ │ ├── audio.config.js │ │ │ │ ├── audio.scss │ │ │ │ └── audio.js │ │ │ ├── button │ │ │ │ ├── button.config.js │ │ │ │ ├── button.scss │ │ │ │ └── button.js │ │ │ ├── canvas │ │ │ │ ├── canvas.config.js │ │ │ │ ├── canvas.scss │ │ │ │ └── canvas.js │ │ │ ├── input │ │ │ │ ├── input.config.js │ │ │ │ ├── input.scss │ │ │ │ └── input.js │ │ │ ├── label │ │ │ │ ├── label.config.js │ │ │ │ ├── label.scss │ │ │ │ └── label.js │ │ │ ├── picker │ │ │ │ ├── picker.config.js │ │ │ │ ├── picker.scss │ │ │ │ └── picker.js │ │ │ ├── radio │ │ │ │ ├── radio.config.js │ │ │ │ ├── radio.scss │ │ │ │ └── radio.js │ │ │ ├── slider │ │ │ │ ├── slider.config.js │ │ │ │ └── slider.js │ │ │ ├── swiper │ │ │ │ ├── swiper.config.js │ │ │ │ ├── swiper.scss │ │ │ │ └── swiper.js │ │ │ ├── switch │ │ │ │ ├── switch.config.js │ │ │ │ ├── switch.scss │ │ │ │ └── switch.js │ │ │ ├── checkbox │ │ │ │ ├── checkbox.config.js │ │ │ │ ├── checkbox.scss │ │ │ │ └── checkbox.js │ │ │ ├── progress │ │ │ │ ├── progress.config.js │ │ │ │ ├── progress.scss │ │ │ │ └── progress.js │ │ │ ├── textarea │ │ │ │ ├── textarea.config.js │ │ │ │ ├── textarea.scss │ │ │ │ └── textarea.js │ │ │ ├── navigator │ │ │ │ ├── navigator.config.js │ │ │ │ ├── navigator.scss │ │ │ │ └── navigator.js │ │ │ ├── picker-view │ │ │ │ ├── picker-view.config.js │ │ │ │ └── picker-view.js │ │ │ └── scroll-view │ │ │ │ ├── scroll-view.config.js │ │ │ │ ├── scroll-view.scss │ │ │ │ └── scroll-view.js │ │ ├── index.config.js │ │ ├── index.scss │ │ └── index.js │ ├── about │ │ ├── about.config.js │ │ ├── about.scss │ │ └── about.js │ └── hello │ │ ├── hello.config.js │ │ ├── hello.scss │ │ └── hello.js ├── asset │ ├── 1.jpg │ ├── timg.jpg │ ├── component │ │ ├── form.png │ │ ├── logo.png │ │ ├── map.png │ │ ├── media.png │ │ ├── nav.png │ │ ├── view.png │ │ ├── canvas.png │ │ ├── content.png │ │ ├── nav_red.png │ │ └── view_red.png │ └── common │ │ └── icon_foot.png ├── constants │ └── counter.js ├── reducers │ ├── index.js │ └── counter.js ├── app.js ├── store │ └── index.js ├── actions │ └── counter.js ├── index.html ├── styles │ ├── reset.scss │ └── mixins.scss ├── app.config.js └── app.scss ├── .gitignore ├── babel.config.js ├── config ├── dev.js ├── prod.js └── index.js ├── .editorconfig ├── project.tt.json ├── project.config.json ├── .eslintrc ├── README.md └── package.json /src/components/tab/tab.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/utils/x.json: -------------------------------------------------------------------------------- 1 | { 2 | "x": 2 3 | } 4 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | export function diao () { 2 | return 'sdsd' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/navigatePage/navigatePage.config.js: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /src/pages/component/pages/redirectPage/redirectPage.config.js: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /src/pages/component/pages/image/image.scss: -------------------------------------------------------------------------------- 1 | .example-body{ 2 | text-align: center; 3 | } -------------------------------------------------------------------------------- /src/pages/component/pages/video/video.scss: -------------------------------------------------------------------------------- 1 | .example-body{ 2 | text-align: center; 3 | } -------------------------------------------------------------------------------- /src/pages/about/about.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: '关于' 3 | } 4 | -------------------------------------------------------------------------------- /src/asset/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NervJS/taro-components-sample/HEAD/src/asset/1.jpg -------------------------------------------------------------------------------- /src/pages/component/pages/camera/camera.scss: -------------------------------------------------------------------------------- 1 | .cammer-content{ 2 | padding-top: 100%; 3 | 4 | } -------------------------------------------------------------------------------- /src/pages/hello/hello.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'hello' 3 | } 4 | -------------------------------------------------------------------------------- /src/asset/timg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NervJS/taro-components-sample/HEAD/src/asset/timg.jpg -------------------------------------------------------------------------------- /src/pages/component/index.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro基础组件展示' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/map/map.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Map组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/constants/counter.js: -------------------------------------------------------------------------------- 1 | export const INCREMENT = 'INCREMENT' 2 | 3 | export const DECREMENT = 'DECREMENT' 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/form/form.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Form组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/icon/icon.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Icon组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/text/text.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Text组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/view/view.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'View组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/audio/audio.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Audio组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/button/button.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Button组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/camera/camera.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Camera组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/canvas/canvas.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Canvas组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/image/image.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Image组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/input/input.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Input组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/label/label.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Label组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/picker/picker.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Picker组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/radio/radio.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Radio组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/slider/slider.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Slider组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/swiper/swiper.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Swiper组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/switch/switch.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Switch组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/video/video.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Video组件' 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | .temp/ 3 | node_modules 4 | .DS_Store 5 | /.idea/workspace.xml 6 | yarn-error.log 7 | .rn_temp 8 | -------------------------------------------------------------------------------- /src/asset/component/form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NervJS/taro-components-sample/HEAD/src/asset/component/form.png -------------------------------------------------------------------------------- /src/asset/component/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NervJS/taro-components-sample/HEAD/src/asset/component/logo.png -------------------------------------------------------------------------------- /src/asset/component/map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NervJS/taro-components-sample/HEAD/src/asset/component/map.png -------------------------------------------------------------------------------- /src/asset/component/media.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NervJS/taro-components-sample/HEAD/src/asset/component/media.png -------------------------------------------------------------------------------- /src/asset/component/nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NervJS/taro-components-sample/HEAD/src/asset/component/nav.png -------------------------------------------------------------------------------- /src/asset/component/view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NervJS/taro-components-sample/HEAD/src/asset/component/view.png -------------------------------------------------------------------------------- /src/pages/component/pages/checkbox/checkbox.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Checkbox组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/progress/progress.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Progress组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/textarea/textarea.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Textare组件' 3 | } 4 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [['taro', { 3 | framework: 'react', 4 | ts: false 5 | }]] 6 | } 7 | -------------------------------------------------------------------------------- /src/asset/common/icon_foot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NervJS/taro-components-sample/HEAD/src/asset/common/icon_foot.png -------------------------------------------------------------------------------- /src/asset/component/canvas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NervJS/taro-components-sample/HEAD/src/asset/component/canvas.png -------------------------------------------------------------------------------- /src/asset/component/content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NervJS/taro-components-sample/HEAD/src/asset/component/content.png -------------------------------------------------------------------------------- /src/asset/component/nav_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NervJS/taro-components-sample/HEAD/src/asset/component/nav_red.png -------------------------------------------------------------------------------- /src/pages/component/pages/navigator/navigator.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Navigator组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/asset/component/view_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NervJS/taro-components-sample/HEAD/src/asset/component/view_red.png -------------------------------------------------------------------------------- /src/pages/component/pages/picker-view/picker-view.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'PickerView组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/scroll-view/scroll-view.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'ScrollView组件' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/component/pages/audio/audio.scss: -------------------------------------------------------------------------------- 1 | .example-body__audio{ 2 | width: 100%; 3 | } 4 | .example-body{ 5 | text-align: center; 6 | } -------------------------------------------------------------------------------- /src/pages/component/pages/button/button.scss: -------------------------------------------------------------------------------- 1 | .btn-center{ 2 | display: flex; 3 | align-items: center; 4 | margin: 0 auto; 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/hello/hello.scss: -------------------------------------------------------------------------------- 1 | .hello_pg { 2 | width: 100%; 3 | height: 300px; 4 | background: url(../../asset/timg.jpg) 0 0 no-repeat; 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/component/pages/picker/picker.scss: -------------------------------------------------------------------------------- 1 | .picker{ 2 | position: relative; 3 | padding: 15px 30px; 4 | background-color: #FFFFFF; 5 | } -------------------------------------------------------------------------------- /src/pages/component/pages/progress/progress.scss: -------------------------------------------------------------------------------- 1 | .example-progress { 2 | font-size: 32px; 3 | position: relative; 4 | margin-bottom: 80px; 5 | } -------------------------------------------------------------------------------- /src/pages/component/pages/image/nerv_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NervJS/taro-components-sample/HEAD/src/pages/component/pages/image/nerv_logo.png -------------------------------------------------------------------------------- /src/pages/component/pages/textarea/textarea.scss: -------------------------------------------------------------------------------- 1 | .components-page__body{ 2 | padding: 0; 3 | .example-body__button { 4 | text-align: center; 5 | } 6 | } -------------------------------------------------------------------------------- /src/pages/component/pages/text/text.scss: -------------------------------------------------------------------------------- 1 | .example-body{ 2 | &__text{ 3 | font-size: 36px; 4 | text-align: center; 5 | margin-bottom: 20px; 6 | } 7 | } -------------------------------------------------------------------------------- /src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux' 2 | import counter from './counter' 3 | 4 | export default combineReducers({ 5 | counter 6 | }) 7 | -------------------------------------------------------------------------------- /config/dev.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | NODE_ENV: JSON.stringify('development') 4 | }, 5 | defineConstants: { 6 | }, 7 | weapp: {}, 8 | h5: {} 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/component/pages/input/input.scss: -------------------------------------------------------------------------------- 1 | .components-page{ 2 | &__body{ 3 | padding: 0; 4 | } 5 | .example-body{ 6 | padding: 20px; 7 | background-color: white; 8 | 9 | } 10 | } -------------------------------------------------------------------------------- /config/prod.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | NODE_ENV: JSON.stringify('production') 4 | }, 5 | defineConstants: { 6 | }, 7 | weapp: {}, 8 | h5: { 9 | publicPath: './', 10 | path: './taro' 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /src/pages/about/about.scss: -------------------------------------------------------------------------------- 1 | page { 2 | overflow: hidden; 3 | } 4 | 5 | 6 | .about { 7 | text-align: center; 8 | margin-top: 150px; 9 | padding: 50px; 10 | .info{ 11 | margin-top: 50px; 12 | font-size: 28px; 13 | line-height: 1.5; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /project.tt.json: -------------------------------------------------------------------------------- 1 | { 2 | "projectname": "taro-components-sample", 3 | "description": "taro-components-sample", 4 | "appid": "体验appId", 5 | "setting": { 6 | "urlCheck": true, 7 | "es6": false, 8 | "postcss": false, 9 | "minified": false 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/pages/component/pages/navigator/navigator.scss: -------------------------------------------------------------------------------- 1 | .example-body{ 2 | text-align: center; 3 | } 4 | 5 | .example-body__navigators-item { 6 | height: 80px; 7 | line-height: 80px; 8 | margin: 20px 100px 0; 9 | text-align: center; 10 | border: 1px solid #ccc; 11 | } 12 | -------------------------------------------------------------------------------- /src/pages/component/pages/navigatePage/navigatePage.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View } from '@tarojs/components' 3 | 4 | export default class PageSwitch extends React.Component { 5 | state = {} 6 | 7 | render () { 8 | return 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/pages/component/pages/redirectPage/redirectPage.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View } from '@tarojs/components' 3 | 4 | export default class PageSwitch extends React.Component { 5 | render () { 6 | return ( 7 | 8 | ) 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import './app.scss' 2 | import React from 'react' 3 | class App extends React.Component { 4 | 5 | componentDidMount () {} 6 | 7 | componentDidShow () {} 8 | 9 | componentDidHide () {} 10 | 11 | componentCatchError () {} 12 | 13 | render () { 14 | return this.props.children 15 | } 16 | } 17 | 18 | export default App 19 | -------------------------------------------------------------------------------- /src/pages/component/pages/canvas/canvas.scss: -------------------------------------------------------------------------------- 1 | .flex-wrp { 2 | margin-top: 60px; 3 | display: flex; 4 | } 5 | .flex-item { 6 | width: 200px; 7 | height: 300px; 8 | font-size: 26px; 9 | } 10 | .flex-item-V { 11 | margin: 0 auto; 12 | width: 300px; 13 | height: 200px; 14 | } 15 | .page-section-title { 16 | text-align: center; 17 | } 18 | -------------------------------------------------------------------------------- /src/pages/component/pages/label/label.scss: -------------------------------------------------------------------------------- 1 | /*postcss-pxtransform rn eject enable*/ 2 | .example-body { 3 | text-align: center; 4 | &__label { 5 | margin-bottom: 20px; 6 | display: block; 7 | } 8 | &__button{ 9 | margin-top: 100px; 10 | text-align: center; 11 | } 12 | } 13 | 14 | /*postcss-pxtransform rn eject disable*/ 15 | -------------------------------------------------------------------------------- /src/pages/component/pages/map/map.scss: -------------------------------------------------------------------------------- 1 | .flex-wrp { 2 | margin-top: 60px; 3 | display: flex; 4 | } 5 | .flex-item { 6 | width: 200px; 7 | height: 300px; 8 | font-size: 26px; 9 | } 10 | .flex-item-V { 11 | margin: 0 auto; 12 | width: 300px; 13 | height: 200px; 14 | } 15 | 16 | .page-section-title { 17 | text-align: center; 18 | } 19 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware } from 'redux' 2 | import thunkMiddleware from 'redux-thunk' 3 | import rootReducer from '../reducers' 4 | 5 | const middlewares = [ 6 | thunkMiddleware 7 | ] 8 | 9 | export default function configStore () { 10 | const store = createStore(rootReducer, applyMiddleware(...middlewares)) 11 | return store 12 | } 13 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "miniprogramRoot": "dist/", 3 | "projectname": "taro-components", 4 | "description": "", 5 | "appid": "touristappid", 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": false, 9 | "enhance": false, 10 | "postcss": false, 11 | "minified": false, 12 | "newFeature": true 13 | }, 14 | "compileType": "miniprogram", 15 | "condition": {} 16 | } 17 | -------------------------------------------------------------------------------- /src/actions/counter.js: -------------------------------------------------------------------------------- 1 | import { 2 | INCREMENT, 3 | DECREMENT 4 | } from '../constants/counter' 5 | 6 | import { createAction } from 'redux-actions' 7 | 8 | export const increment = createAction(INCREMENT) 9 | export const decrement = createAction(DECREMENT) 10 | 11 | export function asyncInc () { 12 | return dispatch => { 13 | setTimeout(() => { 14 | dispatch(increment()) 15 | }, 2000) 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/reducers/counter.js: -------------------------------------------------------------------------------- 1 | import { handleActions } from 'redux-actions' 2 | import { INCREMENT, DECREMENT } from '../constants/counter' 3 | 4 | export default handleActions({ 5 | [INCREMENT] (state) { 6 | return { 7 | ...state, 8 | num: state.num + 1 9 | } 10 | }, 11 | [DECREMENT] (state) { 12 | return { 13 | ...state, 14 | num: state.num - 1 15 | } 16 | } 17 | }, { 18 | num: 0 19 | }) 20 | -------------------------------------------------------------------------------- /src/pages/component/pages/form/form.scss: -------------------------------------------------------------------------------- 1 | .example-body { 2 | &__radio-group { 3 | &-item { 4 | margin-right: 40px; 5 | } 6 | } 7 | &__checkbox-group { 8 | &-item { 9 | margin-right: 40px; 10 | } 11 | } 12 | } 13 | 14 | .example-input { 15 | .example-body { 16 | background-color: white; 17 | margin-left: -40px; 18 | margin-right: -40px; 19 | padding: 20px; 20 | } 21 | } 22 | .form-switch{ 23 | margin: 0 auto; 24 | } -------------------------------------------------------------------------------- /src/pages/component/pages/view/view.scss: -------------------------------------------------------------------------------- 1 | .example{ 2 | margin-bottom: 60px; 3 | &-body{ 4 | &__list{ 5 | display: flex; 6 | &-item{ 7 | flex: auto; 8 | height: 300px; 9 | } 10 | } 11 | &__list--vertical{ 12 | width: 200px; 13 | flex-direction: column; 14 | margin-left: auto; 15 | margin-right: auto; 16 | .example-body__list-item{ 17 | flex: 1 1 200px; 18 | } 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /src/pages/component/pages/scroll-view/scroll-view.scss: -------------------------------------------------------------------------------- 1 | /*postcss-pxtransform rn eject enable*/ 2 | .scroll-view { 3 | .example-body__scroll-view { 4 | &--H { 5 | white-space: nowrap; 6 | .example-body__scroll-view-item { 7 | display: inline-block; 8 | width: 100%; 9 | } 10 | } 11 | &--V { 12 | height: 300px; 13 | } 14 | .example-body__scroll-view-item { 15 | height: 300px; 16 | } 17 | } 18 | } 19 | 20 | /*postcss-pxtransform rn eject disable*/ 21 | -------------------------------------------------------------------------------- /src/pages/component/pages/icon/icon.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../styles/mixins.scss'; 2 | 3 | .page__con__list { 4 | position: relative; 5 | display: flex; 6 | margin-bottom: 40px; 7 | padding-bottom: 40px; 8 | @include border(bottom, 2px, dashed, #999); 9 | min-height: 120px; 10 | 11 | } 12 | 13 | .icon_right { 14 | margin-left: 20px; 15 | &_head { 16 | color: #333; 17 | font-size: 32px; 18 | margin-bottom: 10px; 19 | } 20 | 21 | &_tit { 22 | color: #999; 23 | font-size: 26px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/components/head/head.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View } from '@tarojs/components' 3 | 4 | export default class Header extends React.Component { 5 | static options = { 6 | addGlobalClass: true 7 | } 8 | 9 | render () { 10 | return ( 11 | 12 | {this.props.title} 13 | 14 | {!!this.props.desc ? 15 | ({this.props.desc}) 16 | : null} 17 | 18 | ) 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/components/foot/foot.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View, Image, Navigator } from '@tarojs/components' 3 | // bug 4 | import icon_foot from '../../asset/common/icon_foot.png' 5 | import footImage from '../../asset/common/icon_foot.png' 6 | export default class Foot extends React.Component { 7 | render() { 8 | return ( 9 | 14 | 18 | 19 | ) 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["standard", "standard-jsx"], 3 | "env": { 4 | "browser": true, 5 | "node": true, 6 | "es6": true, 7 | "jest": true 8 | }, 9 | "parser": "babel-eslint", 10 | "parserOptions": { 11 | "ecmaFeatures": { 12 | "jsx": true 13 | } 14 | }, 15 | "globals": { 16 | "wx": true, 17 | "getApp": true, 18 | "getCurrentPages": true 19 | }, 20 | "rules": { 21 | "no-unused-expressions": 0, 22 | "no-useless-constructor": 0, 23 | "react/self-closing-comp": "off", 24 | "react/jsx-closing-bracket-location": [ 25 | "error", 26 | { 27 | "nonEmpty": "after-props", 28 | "selfClosing": "after-props" 29 | } 30 | ] 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/pages/hello/hello.js: -------------------------------------------------------------------------------- 1 | import Taro, { Component } from '@tarojs/taro' 2 | import { View, Text, Input, Button, Image } from '@tarojs/components' 3 | 4 | import './hello.scss' 5 | 6 | export default class Hello extends Component { 7 | componentDidMount () { 8 | console.log('hello mount') 9 | } 10 | 11 | componentDidShow () { 12 | console.log('hello show') 13 | } 14 | 15 | componentDidHide () { 16 | console.log('hello hide') 17 | } 18 | 19 | componentWillUnmount () { 20 | console.log('hello unmount') 21 | } 22 | 23 | render () { 24 | return ( 25 | 26 | hello 27 | 28 | 29 | ) 30 | } 31 | } 32 | 33 | -------------------------------------------------------------------------------- /src/pages/component/pages/map/map.js: -------------------------------------------------------------------------------- 1 | import './map.scss' 2 | import React from 'react' 3 | 4 | import Taro from '@tarojs/taro' 5 | import { View, Text } from '@tarojs/components' 6 | 7 | import Header from '../../../../components/head/head' 8 | 9 | export default class PageView extends React.Component { 10 | render() { 11 | return ( 12 | 13 |
14 | 15 | 16 | 17 | {Taro.getEnv() == Taro.ENV_TYPE.WEAPP ? 可直接使用微信小程序的Map组件 : 暂未支持，敬请期待} 18 | 19 | 20 | 21 | 22 | ) 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/pages/component/pages/switch/switch.scss: -------------------------------------------------------------------------------- 1 | .switch-list { 2 | position: relative; 3 | padding: 0 15px; 4 | background-color: #FFFFFF; 5 | &__item { 6 | position: relative; 7 | display: flex; 8 | padding: 10px 0; 9 | &:not(:first-child) { 10 | &::before { 11 | content: ""; 12 | position: absolute; 13 | left: 15px; 14 | right: -15px; 15 | top: 0; 16 | height: 1px; 17 | border-top: 1px solid #e5e5e5; 18 | color: #e5e5e5; 19 | } 20 | } 21 | } 22 | &__text { 23 | display: flex; 24 | flex: 1; 25 | align-items: center; 26 | padding-left: 15px; 27 | } 28 | } -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Taro基础组件展示 8 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /src/pages/component/pages/canvas/canvas.js: -------------------------------------------------------------------------------- 1 | import './canvas.scss' 2 | 3 | import Taro from '@tarojs/taro' 4 | import React from 'react' 5 | import { View, Text } from '@tarojs/components' 6 | 7 | import Header from '../../../../components/head/head' 8 | 9 | export default class PageView extends React.Component { 10 | render () { 11 | return ( 12 | 13 |
14 | 15 | 16 | 17 | { Taro.getEnv() == Taro.ENV_TYPE.WEAPP ? 可直接使用微信小程序的Canvas组件 : 暂未支持，敬请期待 } 18 | 19 | 20 | 21 | 22 | ) 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/styles/reset.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 统一多端基础样式 3 | * 比较理想的是 View 标签统一为 display: flex; flex-direction: column 4 | * 但是 H5 上内置组件样式可能会错乱，因此暂时不这样处理，有用到 flex 的地方都显式声明主轴方向即可 5 | */ 6 | 7 | /* weapp */ 8 | page { 9 | height: 100%; 10 | } 11 | 12 | taro-view-core, 13 | taro-text-core, 14 | taro-scroll-view-core { 15 | box-sizing: border-box; 16 | } 17 | 18 | button { 19 | &:after { 20 | display: none; 21 | } 22 | } 23 | 24 | /* h5 */ 25 | /*postcss-pxtransform rn eject enable*/ 26 | div { 27 | box-sizing: border-box; 28 | } 29 | 30 | button { 31 | outline: none; 32 | } 33 | 34 | .taro-text { 35 | box-sizing: border-box; 36 | } 37 | 38 | .taro-tabbar__panel, 39 | .taro_router { 40 | flex: 1; 41 | display: flex; 42 | flex-direction: column; 43 | } 44 | .taro_page { 45 | flex: 1; 46 | } 47 | /*postcss-pxtransform rn eject disable*/ 48 | -------------------------------------------------------------------------------- /src/pages/about/about.js: -------------------------------------------------------------------------------- 1 | import './about.scss' 2 | 3 | import React from 'react' 4 | import { View, Text } from '@tarojs/components' 5 | export default class About extends React.Component { 6 | componentDidMount () { 7 | console.log('about mount') 8 | } 9 | 10 | componentDidShow () { 11 | console.log('about show') 12 | } 13 | 14 | componentDidHide () { 15 | console.log('about hide') 16 | } 17 | 18 | componentWillUnmount () { 19 | console.log('about unmount') 20 | } 21 | 22 | render () { 23 | return ( 24 | 25 | 26 | 27 | Taro 基础组件库，一套基于「微信小程序」和「WeUI」规范实现的基础组件，依赖于 NervJS 或 Taro框架；其组件样式与「WeUI」规范一致，调用方式与「微信小程序」接口一致，为快速开发多端项目而准备 28 | 29 | 30 | 31 | ) 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/pages/component/pages/audio/audio.js: -------------------------------------------------------------------------------- 1 | import './audio.scss' 2 | import React from 'react' 3 | import { View, Audio } from '@tarojs/components' 4 | 5 | import Header from '../../../../components/head/head' 6 | 7 | export default class PageView extends React.Component { 8 | render() { 9 | return ( 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 26 | 27 | 28 | 29 | 30 | ) 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/pages/component/pages/checkbox/checkbox.scss: -------------------------------------------------------------------------------- 1 | .components-page__body { 2 | padding: 0; 3 | .example-body { 4 | text-align: center; 5 | } 6 | } 7 | 8 | .checkbox-list { 9 | position: relative; 10 | padding: 10px 15px; 11 | background-color: #FFFFFF; 12 | &::before { 13 | content: " "; 14 | position: absolute; 15 | left: 0; 16 | top: 0; 17 | right: 0; 18 | height: 1px; 19 | border-top: 1px solid #e5e5e5; 20 | color: #e5e5e5; 21 | } 22 | &::after { 23 | content: " "; 24 | position: absolute; 25 | left: 0; 26 | bottom: 0; 27 | right: 0; 28 | height: 1px; 29 | border-top: 1px solid #e5e5e5; 30 | color: #e5e5e5; 31 | } 32 | } 33 | 34 | .checkbox-list__label { 35 | position: relative; 36 | display: flex; 37 | padding: 10px 15px; 38 | &:not(:first-child) { 39 | &::before { 40 | content: ""; 41 | position: absolute; 42 | left: 0; 43 | top: 0; 44 | right: 0; 45 | height: 1px; 46 | border-top: 1px solid #e5e5e5; 47 | color: #e5e5e5; 48 | left: 15px; 49 | } 50 | } 51 | } 52 | 53 | .select-box { 54 | margin: 20px 0; 55 | } -------------------------------------------------------------------------------- /src/pages/component/pages/radio/radio.scss: -------------------------------------------------------------------------------- 1 | .components-page__body { 2 | padding: 0; 3 | .example-body{ 4 | text-align: center; 5 | } 6 | } 7 | 8 | .example-body__radios { 9 | position: relative; 10 | padding: 0px 15px; 11 | background-color: #FFFFFF; 12 | &::before { 13 | content: " "; 14 | position: absolute; 15 | left: 0; 16 | top: 0; 17 | right: 0; 18 | height: 1px; 19 | border-top: 1px solid #e5e5e5; 20 | color: #e5e5e5; 21 | } 22 | &::after { 23 | content: " "; 24 | position: absolute; 25 | left: 0; 26 | bottom: 0; 27 | right: 0; 28 | height: 1px; 29 | border-top: 1px solid #e5e5e5; 30 | color: #e5e5e5; 31 | } 32 | &-item { 33 | position: relative; 34 | display: flex; 35 | padding: 20px 15px; 36 | &:not(:first-child) { 37 | &::before { 38 | content: ""; 39 | position: absolute; 40 | left: 0; 41 | top: 0; 42 | right: 0; 43 | height: 1px; 44 | border-top: 1px solid #e5e5e5; 45 | color: #e5e5e5; 46 | left: 15px; 47 | } 48 | } 49 | } 50 | } 51 | 52 | .example-body__select-box { 53 | margin: 20px 0; 54 | } -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | // NOTE 在 sass 中通过别名（@ 或 ~）引用需要指定路径 4 | const sassImporter = function(url) { 5 | if (url[0] === '~' && url[1] !== '/') { 6 | return { 7 | file: path.resolve(__dirname, '..', 'node_modules', url.substr(1)) 8 | } 9 | } 10 | 11 | const reg = /^@styles\/(.*)/ 12 | return { 13 | file: reg.test(url) ? path.resolve(__dirname, '..', 'src/styles', url.match(reg)[1]) : url 14 | } 15 | } 16 | 17 | const config = { 18 | projectName: 'taro-components-sample', 19 | designWidth: 750, 20 | sourceRoot: 'src', 21 | outputRoot: 'dist', 22 | framework: 'react', 23 | sass: { 24 | importer: sassImporter 25 | }, 26 | defineConstants: { 27 | WWW: JSON.stringify('www') 28 | }, 29 | mini: { 30 | }, 31 | h5: { 32 | publicPath: '/', 33 | staticDirectory: 'static', 34 | module: { 35 | postcss: { 36 | autoprefixer: { 37 | enable: true 38 | } 39 | } 40 | } 41 | } 42 | } 43 | 44 | module.exports = function (merge) { 45 | if (process.env.NODE_ENV === 'development') { 46 | return merge({}, config, require('./dev')) 47 | } 48 | return merge({}, config, require('./prod')) 49 | } 50 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 安装 Taro 开发工具 `@tarojs/cli` 3 | 4 | 使用 npm或者yarn 全局安装，或者直接使用[npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) 5 | 6 | ```bash 7 | $ npm install -g @tarojs/cli 8 | $ yarn global add @tarojs/cli 9 | ``` 10 | 11 | 安装依赖包： 12 | ``` 13 | $ yarn install 14 | ``` 15 | 16 | 进入项目目录开始开发，可以选择小程序预览模式，或者H5预览模式，若使用微信小程序预览模式，则需要自行下载并打开[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)，选择预览项目根目录下 `dist` 目录。 17 | 18 | 微信小程序编译预览模式 19 | 20 | ```bash 21 | # npm script 22 | $ npm run dev:weapp 23 | # 仅限全局安装 24 | $ taro build --type weapp --watch 25 | # npx用户也可以使用 26 | $ npx taro build --type weapp --watch 27 | ``` 28 | 29 | H5编译预览模式 30 | ```bash 31 | # npm script 32 | $ npm run dev:h5 33 | # 仅限全局安装 34 | $ taro build --type h5 --watch 35 | # npx用户也可以使用 36 | $ npx taro build --type h5 --watch 37 | ``` 38 | 39 | 项目打包 40 | 41 | 打包小程序代码 42 | ```bash 43 | # npm script 44 | $ npm run build:weapp 45 | # 仅限全局安装 46 | $ taro build --type weapp 47 | # npx用户也可以使用 48 | $ npx taro build --type weapp 49 | ``` 50 | 51 | 打包H5代码 52 | ```bash 53 | # npm script 54 | $ npm run build:h5 55 | # 仅限全局安装 56 | $ taro build --type h5 57 | # npx用户也可以使用 58 | $ npx taro build --type h5 59 | ``` 60 | -------------------------------------------------------------------------------- /src/pages/component/pages/swiper/swiper.scss: -------------------------------------------------------------------------------- 1 | .components-page__body { 2 | &.swiper { 3 | padding: 0; 4 | } 5 | .switch-list { 6 | position: relative; 7 | padding: 0 15px; 8 | font-size: 30px; 9 | background-color: #FFFFFF; 10 | &__item { 11 | position: relative; 12 | display: flex; 13 | padding: 10px 0; 14 | &:not(:first-child) { 15 | &::before { 16 | content: ""; 17 | position: absolute; 18 | left: 15px; 19 | right: -15px; 20 | top: 0; 21 | height: 1px; 22 | border-top: 1px solid #e5e5e5; 23 | color: #e5e5e5; 24 | } 25 | } 26 | } 27 | &__text { 28 | display: flex; 29 | flex: 1; 30 | align-items: center; 31 | padding-left: 15px; 32 | } 33 | } 34 | .slider-list { 35 | margin-top: 80px; 36 | padding: 0 40px; 37 | &__item { 38 | margin-bottom: 40px; 39 | &-header { 40 | font-size: 28px; 41 | color: #999999; 42 | text-align: center; 43 | margin-bottom: 15px; 44 | } 45 | &-body {} 46 | } 47 | } 48 | } 49 | .demo-text { 50 | &-1, 51 | &-2, 52 | &-3 { 53 | height: 150PX; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/components/tab/tab.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { connect } from 'react-redux' 3 | import { View, Image, Button ,Text} from '@tarojs/components' 4 | 5 | import { diao } from '../../utils' 6 | 7 | import mv from '../../asset/timg.jpg' 8 | 9 | import './tab.scss' 10 | 11 | import { increment, decrement, asyncInc } from '../../actions/counter' 12 | 13 | class Tab extends React.Component { 14 | 15 | handler = () => { 16 | console.log(this.props.t) 17 | console.log(diao) 18 | this.props.xx() 19 | } 20 | 21 | render () { 22 | return ( 23 | 24 | 25 | 26 | 27 | {this.props.counter.num} 28 | 29 | componentTab{this.props.t} 30 | 31 | ) 32 | } 33 | } 34 | 35 | export default connect(({ counter }) => ({ 36 | counter 37 | }), (dispatch) => ({ 38 | inc () { 39 | dispatch(increment()) 40 | }, 41 | dec () { 42 | dispatch(decrement()) 43 | }, 44 | asyncInc () { 45 | dispatch(asyncInc()) 46 | } 47 | }))(Tab) 48 | -------------------------------------------------------------------------------- /src/pages/component/pages/video/video.js: -------------------------------------------------------------------------------- 1 | import './video.scss' 2 | import React from 'react' 3 | import { View, Video } from '@tarojs/components' 4 | 5 | import Header from '../../../../components/head/head' 6 | 7 | export default class PageView extends React.Component { 8 | render() { 9 | return ( 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 27 | 28 | 29 | 30 | ) 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/pages/component/pages/camera/camera.js: -------------------------------------------------------------------------------- 1 | import './camera.scss' 2 | 3 | import React from 'react' 4 | 5 | import { Camera, Button, View } from '@tarojs/components' 6 | 7 | import Header from '../../../../components/head/head' 8 | 9 | export default class PageView extends React.Component { 10 | constructor() { 11 | super(...arguments) 12 | this.state = { 13 | devicePosition: 'back' 14 | } 15 | } 16 | 17 | handleError() { 18 | alert('您的浏览器不允许使用摄像头') 19 | } 20 | 21 | handleStop() { 22 | alert('摄像头被非正常终止') 23 | } 24 | 25 | toggleDevice = () => { 26 | this.setState({ 27 | devicePosition: this.state.devicePosition == 'back' ? 'front' : 'back' 28 | }) 29 | } 30 | 31 | render() { 32 | return ( 33 | 34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | ) 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "taro-components-sample", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build:weapp": "taro build --type weapp", 8 | "build:h5": "taro build --type h5", 9 | "dev:weapp": "npm run build:weapp -- --watch", 10 | "dev:h5": "npm run build:h5 -- --watch" 11 | }, 12 | "author": "", 13 | "license": "MIT", 14 | "dependencies": { 15 | "@tarojs/components": "3.4.12", 16 | "@tarojs/react": "3.4.12", 17 | "@tarojs/runtime": "3.4.12", 18 | "@tarojs/taro": "3.4.12", 19 | "@tarojs/plugin-framework-react": "3.4.12", 20 | "react": "^17.0.0", 21 | "react-dom": "^17.0.0", 22 | "react-redux": "^7.2.0", 23 | "redux": "^3.7.2", 24 | "redux-actions": "^2.3.0", 25 | "redux-thunk": "^2.2.0" 26 | }, 27 | "devDependencies": { 28 | "@tarojs/mini-runner": "3.4.12", 29 | "@tarojs/webpack-runner": "3.4.12", 30 | "babel-eslint": "^8.2.3", 31 | "babel-plugin-transform-class-properties": "^6.24.1", 32 | "babel-plugin-transform-decorators-legacy": "^1.3.4", 33 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 34 | "babel-preset-taro": "3.4.12", 35 | "babel-preset-env": "^1.6.1", 36 | "eslint": "^8.12.0", 37 | "eslint-config-standard-jsx": "^5.0.0", 38 | "eslint-config-taro": "3.4.12", 39 | "eslint-loader": "^2.0.0", 40 | "eslint-plugin-import": "^2.12.0", 41 | "eslint-plugin-node": "^6.0.1", 42 | "eslint-plugin-promise": "^3.8.0", 43 | "eslint-plugin-react": "^7.9.1", 44 | "eslint-plugin-standard": "^3.1.0" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/pages/component/pages/navigator/navigator.js: -------------------------------------------------------------------------------- 1 | import './navigator.scss' 2 | 3 | import Taro from '@tarojs/taro' 4 | import React from 'react' 5 | 6 | import { View, Navigator, Text } from '@tarojs/components' 7 | 8 | import Header from '../../../../components/head/head' 9 | 10 | export default class PageSwitch extends React.Component { 11 | state = {} 12 | 13 | render() { 14 | return ( 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | { 23 | Taro.getEnv() != Taro.ENV_TYPE.WEB ? 24 | 27 | 跳转到新页面 28 | 29 | 33 | 在当前页打开 34 | 35 | : 暂未支持，请使用Taro API 36 | } 37 | 38 | 39 | 40 | 41 | 42 | ) 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/pages/component/pages/image/image.js: -------------------------------------------------------------------------------- 1 | import './image.scss' 2 | 3 | import React from 'react' 4 | import { View, Text, Image } from '@tarojs/components' 5 | 6 | import nervLogo from './nerv_logo.png' 7 | 8 | import Header from '../../../../components/head/head' 9 | 10 | export default class PageView extends React.Component { 11 | render() { 12 | return ( 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | Local Image 21 | 22 | 23 | 26 | 27 | 28 | 29 | 30 | Internet Image 31 | 32 | 33 | 36 | 37 | 38 | 39 | 40 | ) 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/styles/mixins.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 对于部分不兼容的样式，可以通过 mixins 统一处理 3 | */ 4 | 5 | /** 6 | * // NOTE Taro 编译成 RN 时对 border 的处理有问题 7 | * RN 不支持针对某一边设置 style，即 border-bottom-style 会报错 8 | * 那么 border-bottom: 1px 就需要写成如下形式： 9 | * border: 0 style color; border-bottom-width: 1px; 10 | */ 11 | @mixin border($dir, $width, $style, $color) { 12 | border: 0 $style $color; 13 | @each $d in $dir { 14 | #{border-#{$d}-width}: $width; 15 | } 16 | } 17 | 18 | /** 19 | * 对于不能打包到 RN 的样式，可以用 mixins 引入，相对美观一些 20 | */ 21 | @mixin eject($attr, $value) { 22 | /*postcss-pxtransform rn eject enable*/ 23 | #{$attr}: $value; 24 | /*postcss-pxtransform rn eject disable*/ 25 | } 26 | 27 | /** 28 | * // TODO 1px 的线在各端上实现方式不同，统一出来后续再兼容，目前注意两点： 29 | * 1. Taro 中大写的 PX 不会被编译成 rpx/em，但 RN 还未兼容该写法 30 | * 2. H5 中 1px(转成 rem 后实际小于 0.5px) + border-radius 会导致 border 不显示 31 | */ 32 | @mixin hairline($attr) { 33 | #{$attr}: 1px; 34 | @include eject($attr, 1PX); 35 | } 36 | 37 | /** 38 | * NOTE RN 无法通过 text-overflow 实现省略号，这些代码不能打包到 RN 中 39 | */ 40 | @mixin text-ellipsis() { 41 | /*postcss-pxtransform rn eject enable*/ 42 | overflow: hidden; 43 | white-space: nowrap; 44 | text-overflow: ellipsis; 45 | /*postcss-pxtransform rn eject disable*/ 46 | } 47 | 48 | /** 49 | * NOTE 实现多行文本省略，RN 用 Text 标签的 numberOfLines，H5/小程序用 -webkit-line-clamp 50 | */ 51 | @mixin lamp-clamp($line) { 52 | /*postcss-pxtransform rn eject enable*/ 53 | overflow: hidden; 54 | text-overflow: ellipsis; 55 | display: -webkit-box; 56 | -webkit-line-clamp: $line; 57 | /* autoprefixer: ignore next */ 58 | -webkit-box-orient: vertical; 59 | /*postcss-pxtransform rn eject disable*/ 60 | } 61 | -------------------------------------------------------------------------------- /src/pages/component/pages/view/view.js: -------------------------------------------------------------------------------- 1 | import './view.scss' 2 | 3 | import React from 'react' 4 | import { View, Text } from '@tarojs/components' 5 | 6 | import Header from '../../../../components/head/head' 7 | 8 | export default class PageView extends React.Component { 9 | render() { 10 | return ( 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | flex-direction: row 横向布局 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | flex-direction: column 纵向布局 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | ) 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/pages/component/pages/textarea/textarea.js: -------------------------------------------------------------------------------- 1 | import './textarea.scss' 2 | 3 | import React from 'react' 4 | import { View, Text, Textarea, Button } from '@tarojs/components' 5 | 6 | import Header from '../../../../components/head/head' 7 | 8 | export default class PageTextarea extends React.Component { 9 | state = { 10 | value: '初始值', 11 | } 12 | 13 | handleClick = () => { 14 | this.setState({ 15 | value: '点击了按钮', 16 | }) 17 | } 18 | 19 | blur = () => { 20 | console.log('blur'); 21 | 22 | } 23 | 24 | focus = () => { 25 | console.log('focus') 26 | } 27 | 28 | input = (e) => { 29 | console.log(e); 30 | this.setState({ 31 | value: e.target.value 32 | }) 33 | } 34 | 35 | render() { 36 | return ( 37 | 38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 | 输入区域高度自适应，不会出现滚动条 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 这是一个可以自动聚焦的textarea 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | ) 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/app.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | pages: [ 3 | 'pages/component/index', 4 | 'pages/component/pages/view/view', 5 | 'pages/component/pages/scroll-view/scroll-view', 6 | 'pages/component/pages/icon/icon', 7 | 'pages/component/pages/progress/progress', 8 | 'pages/component/pages/image/image', 9 | 'pages/component/pages/audio/audio', 10 | 'pages/component/pages/video/video', 11 | 'pages/component/pages/swiper/swiper', 12 | 'pages/component/pages/form/form', 13 | 'pages/component/pages/input/input', 14 | 'pages/component/pages/checkbox/checkbox', 15 | 'pages/component/pages/radio/radio', 16 | 'pages/component/pages/button/button', 17 | 'pages/component/pages/text/text', 18 | 'pages/component/pages/label/label', 19 | 'pages/component/pages/picker/picker', 20 | 'pages/component/pages/picker-view/picker-view', 21 | 'pages/component/pages/slider/slider', 22 | 'pages/component/pages/switch/switch', 23 | 'pages/component/pages/textarea/textarea', 24 | 'pages/component/pages/canvas/canvas', 25 | 'pages/component/pages/map/map', 26 | 'pages/component/pages/navigator/navigator', 27 | 'pages/component/pages/redirectPage/redirectPage', 28 | 'pages/component/pages/navigatePage/navigatePage', 29 | 'pages/about/about', 30 | 'pages/component/pages/camera/camera' 31 | ], 32 | window: { 33 | backgroundTextStyle: 'light', 34 | navigationBarBackgroundColor: '#fff', 35 | navigationBarTitleText: 'TODO List', 36 | navigationBarTextStyle: 'black' 37 | }, 38 | tabBar: { 39 | backgroundColor: '#fff', 40 | selectedColor: '#dc0032', 41 | list: [ 42 | { 43 | pagePath: 'pages/component/index', 44 | text: '组件', 45 | iconPath: 'asset/component/view.png', 46 | selectedIconPath: 'asset/component/view_red.png' 47 | }, 48 | { 49 | pagePath: 'pages/about/about', 50 | text: '关于', 51 | iconPath: 'asset/component/nav.png', 52 | selectedIconPath: 'asset/component/nav_red.png' 53 | } 54 | ] 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/pages/component/pages/picker-view/picker-view.js: -------------------------------------------------------------------------------- 1 | import Taro, { Component } from '@tarojs/taro' 2 | import React from 'react' 3 | 4 | import { View, PickerView, PickerViewColumn } from '@tarojs/components' 5 | 6 | export default class Picks extends React.Component { 7 | constructor() { 8 | super(...arguments) 9 | const date = new Date() 10 | const years = [] 11 | const months = [] 12 | const days = [] 13 | for (let i = 1990; i <= date.getFullYear(); i++) { 14 | years.push(i) 15 | } 16 | for (let i = 1; i <= 12; i++) { 17 | months.push(i) 18 | } 19 | for (let i = 1; i <= 31; i++) { 20 | days.push(i) 21 | } 22 | this.state = { 23 | years: years, 24 | year: date.getFullYear(), 25 | months: months, 26 | month: 2, 27 | days: days, 28 | day: 2, 29 | value: [9999, 1, 1], 30 | } 31 | } 32 | 33 | onChange = e => { 34 | const val = e.detail.value 35 | this.setState({ 36 | year: this.state.years[val[0]], 37 | month: this.state.months[val[1]], 38 | day: this.state.days[val[2]], 39 | value: val 40 | }) 41 | } 42 | 43 | render() { 44 | return ( 45 | 46 | {this.state.year}年{this.state.month}月{this.state.day}日 47 | 48 | 49 | {this.state.years.map(item => { 50 | return ( 51 | {item}年 52 | ); 53 | })} 54 | 55 | 56 | {this.state.months.map(item => { 57 | return ( 58 | {item}月 59 | ); 60 | })} 61 | 62 | 63 | {this.state.days.map(item => { 64 | return ( 65 | {item}日 66 | ); 67 | })} 68 | 69 | 70 | 71 | ) 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/pages/component/pages/scroll-view/scroll-view.js: -------------------------------------------------------------------------------- 1 | import './scroll-view.scss' 2 | import React from 'react' 3 | import { View, Text, ScrollView, Button } from '@tarojs/components' 4 | 5 | import Header from '../../../../components/head/head' 6 | 7 | export default class PageView extends React.Component { 8 | render() { 9 | return ( 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | Horizontal 横向滚动 18 | 19 | 20 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | Vertical 纵向滚动 34 | 35 | 36 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | ) 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/pages/component/pages/text/text.js: -------------------------------------------------------------------------------- 1 | import './text.scss' 2 | import React from 'react' 3 | import { View, Text } from '@tarojs/components' 4 | 5 | import Header from '../../../../components/head/head' 6 | 7 | export default class PageView extends React.Component { 8 | constructor() { 9 | super(...arguments) 10 | 11 | this.state = { 12 | contents: [] 13 | } 14 | } 15 | 16 | render() { 17 | return ( 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | H5、小程序通用 26 | 27 | 28 | 29 | 可选择的文字 30 | 31 | 32 | 不可选择的文字 33 | 34 | 35 | 36 | 37 | 38 | 仅工作在小程序 39 | 40 | 41 | 42 | 不支持多 空格文字 43 | 44 | 45 | 多 空格文字(ensp) 46 | 47 | 48 | 多 空格文字(nbsp) 49 | 50 | 51 | 不解码文字> 52 | 53 | 54 | 解码文字> 55 | 56 | 57 | 58 | 59 | 60 | ) 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/pages/component/pages/switch/switch.js: -------------------------------------------------------------------------------- 1 | import './switch.scss' 2 | import React from 'react' 3 | import { View, Text, Switch } from '@tarojs/components' 4 | 5 | import Header from '../../../../components/head/head' 6 | 7 | export default class PageSwitch extends React.Component { 8 | state = { 9 | isChecked: true 10 | } 11 | 12 | setIsChecked = (e) => { 13 | const { detail } = e 14 | this.setState({ 15 | isChecked: detail.value 16 | }) 17 | } 18 | 19 | render() { 20 | return ( 21 | 22 |
23 | 24 | 25 | 26 | 静态展示 27 | 28 | 29 | 30 | 关闭 31 | 32 | 33 | 34 | 开启中 35 | 36 | 37 | 38 | 更换颜色 39 | 40 | 41 | 42 | CheckBox形式 43 | 44 | 45 | 46 | 47 | 48 | 49 | 数据绑定 50 | 51 | 52 | 53 | {this.state.isChecked ? '开启' : '关闭'} 54 | 55 | 56 | 57 | 58 | 59 | 60 | ) 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/pages/component/pages/label/label.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | // RadioGroup 4 | import { 5 | View, 6 | Text, 7 | CheckboxGroup, 8 | Checkbox, 9 | Label, 10 | Radio, 11 | RadioGroup 12 | } from '@tarojs/components' 13 | 14 | import Header from '../../../../components/head/head' 15 | 16 | import './label.scss' 17 | 18 | export default class PageLabel extends React.Component { 19 | state = { 20 | checked: false 21 | } 22 | 23 | handleChange = e => { 24 | const { checked } = this.state 25 | this.setState({ 26 | checked: !checked 27 | }) 28 | } 29 | 30 | render() { 31 | return ( 32 | 33 | 34 |
35 | 36 | 37 | 38 | 39 | 表单组件在label内 40 | 41 | 42 | 43 | 46 | 51 | 52 | 53 | 54 | 55 | 56 | 表单组件在Label外 57 | 58 | 59 | 60 | GuangZhou 61 | ShenZhen 62 | 63 | 64 | 65 | 68 | 71 | 72 | 73 | 74 | ) 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/pages/component/index.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles//mixins.scss'; 2 | 3 | .index-hd { 4 | padding: 80px; 5 | text-align: center; 6 | align-items: center; 7 | } 8 | 9 | .index-bd { 10 | padding: 0 30px 40px; 11 | } 12 | 13 | .index-ft { 14 | padding-bottom: 20px; 15 | text-align: center; 16 | } 17 | 18 | .index-logo { 19 | width: 86px; 20 | height: 86px; 21 | } 22 | 23 | .index-desc { 24 | margin-top: 20px; 25 | font-size: 28px; 26 | } 27 | 28 | .index-desc_text { 29 | color: #888888; 30 | } 31 | 32 | .navigator-box { 33 | opacity: 0; 34 | position: relative; 35 | background-color: #ffffff; 36 | line-height: 1.41176471; 37 | font-size: 28px; 38 | @include eject(transform, translateY(-50%)); 39 | @include eject(transition, 0.3s); 40 | } 41 | 42 | .navigator-box-show { 43 | opacity: 1; 44 | transform: translateY(0); 45 | } 46 | 47 | .navigator { 48 | padding: 20px 30px; 49 | position: relative; 50 | display: flex; 51 | align-items: center; 52 | } 53 | 54 | .navigator:before { 55 | content: ' '; 56 | position: absolute; 57 | left: 30px; 58 | top: 0; 59 | right: 30px; 60 | height: 1px; 61 | border-top: 1px solid #d8d8d8; 62 | color: #d8d8d8; 63 | } 64 | 65 | .navigator:first-child:before { 66 | display: none; 67 | } 68 | 69 | .navigator-text { 70 | flex: 1; 71 | } 72 | 73 | .navigator-arrow { 74 | padding-right: 26px; 75 | position: relative; 76 | } 77 | 78 | .navigator-arrow:after { 79 | content: ' '; 80 | display: inline-block; 81 | height: 18px; 82 | width: 18px; 83 | border-width: 2px 2px 0 0; 84 | border-color: #888888; 85 | border-style: solid; 86 | transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 87 | position: absolute; 88 | top: 50%; 89 | margin-top: -8px; 90 | right: 28px; 91 | } 92 | 93 | .kind-list { 94 | font-size: 32px; 95 | } 96 | 97 | .kind-list-item { 98 | margin: 20px 0; 99 | background-color: #ffffff; 100 | border-radius: 4px; 101 | overflow: hidden; 102 | } 103 | 104 | .kind-list-item:first-child { 105 | margin-top: 0; 106 | } 107 | 108 | .kind-list-text { 109 | flex: 1; 110 | } 111 | 112 | .kind-list-img { 113 | width: 60px; 114 | height: 60px; 115 | } 116 | 117 | .kind-list-item-hd { 118 | padding: 30px; 119 | display: flex; 120 | flex-direction: row; 121 | align-items: center; 122 | 123 | @include eject(transition, opacity 0.3s); 124 | } 125 | 126 | .kind-list-item-hd-show { 127 | opacity: 0.2; 128 | } 129 | 130 | .kind-list-item-bd { 131 | height: 0; 132 | overflow: hidden; 133 | } 134 | 135 | .kind-list-item-bd-show { 136 | height: auto; 137 | } 138 | -------------------------------------------------------------------------------- /src/pages/component/pages/button/button.js: -------------------------------------------------------------------------------- 1 | import './button.scss' 2 | import React from 'react' 3 | import { View, Button } from '@tarojs/components' 4 | 5 | import Header from '../../../../components/head/head' 6 | 7 | export default class PageButton extends React.Component { 8 | state = { 9 | btn: [ 10 | { 11 | text: '页面主操作 Normal', 12 | size: 'default', 13 | type: 'primary' 14 | }, 15 | { 16 | text: '页面主操作 Loading', 17 | size: 'default', 18 | type: 'primary', 19 | loading: true 20 | }, 21 | { 22 | text: '页面主操作 Disabled', 23 | size: 'default', 24 | type: 'primary', 25 | disabled: true 26 | }, 27 | { 28 | text: '页面次要操作 Normal', 29 | size: 'default', 30 | type: 'default' 31 | }, 32 | { 33 | text: '页面次要操作 Disabled', 34 | size: 'default', 35 | type: 'default', 36 | disabled: true 37 | }, 38 | { 39 | text: '警告类操作 Normal', 40 | size: 'default', 41 | type: 'warn' 42 | }, 43 | { 44 | text: '警告类操作 Disabled', 45 | size: 'default', 46 | type: 'warn', 47 | disabled: true 48 | } 49 | ] 50 | } 51 | render() { 52 | return ( 53 | 54 | 55 |
56 | 57 | 58 | 59 | 60 | {this.state.btn.map(item => { 61 | return ( 62 | 69 | ) 70 | })} 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | ) 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/pages/component/pages/progress/progress.js: -------------------------------------------------------------------------------- 1 | import './progress.scss' 2 | import React from 'react' 3 | import { View, Progress, Button } from '@tarojs/components' 4 | 5 | import Header from '../../../../components/head/head' 6 | 7 | export default class PageView extends React.Component { 8 | constructor() { 9 | super(...arguments) 10 | this._timmer = null 11 | } 12 | 13 | state = { 14 | progress: 0 15 | } 16 | 17 | handleStart = () => { 18 | if (this._timmer || this.state.progress > 100) return 19 | this._timmer = setInterval(() => { 20 | const value = this.state.progress + 2 21 | if (value > 100) { 22 | return this.handleStop() 23 | } 24 | this.setState({ 25 | progress: value 26 | }) 27 | }, 100) 28 | } 29 | 30 | handleStop = () => { 31 | if (this._timmer) { 32 | clearInterval(this._timmer) 33 | this._timmer = null 34 | } 35 | } 36 | 37 | handleReset = () => { 38 | this.handleStop() 39 | this.setState({ 40 | progress: 0 41 | }) 42 | } 43 | 44 | render() { 45 | const { progress } = this.state 46 | return ( 47 | 48 | 49 |
50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 68 | 69 | 70 | 71 | 72 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | ) 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/pages/component/pages/slider/slider.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View, Button, Text, Slider } from '@tarojs/components' 3 | 4 | import Header from '../../../../components/head/head' 5 | 6 | export default class PageSlider extends React.Component { 7 | state = { 8 | value: 50 9 | } 10 | 11 | setValue = () => { 12 | const value = Math.floor(Math.random() * 100) 13 | console.log(value) 14 | this.setState({ 15 | value 16 | }) 17 | } 18 | 19 | handleChaning = e => { 20 | 21 | } 22 | 23 | handleChange = e => { 24 | 25 | } 26 | 27 | render() { 28 | return ( 29 | 30 | 31 |
32 | 33 | 34 | 35 | 36 | 37 | 设置step 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 显示当前的value 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 设置最小/最大值 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | UI设置 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 数据绑定 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | ) 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/pages/component/pages/radio/radio.js: -------------------------------------------------------------------------------- 1 | import './radio.scss' 2 | import React from 'react' 3 | import { Component } from '@tarojs/taro' 4 | import { View, Text, Radio, Label, RadioGroup } from '@tarojs/components' 5 | 6 | import Header from '../../../../components/head/head' 7 | 8 | export default class PageRadio extends React.Component { 9 | state = { 10 | isChecked: false, 11 | selectValue: '中国', 12 | list: [ 13 | { 14 | value: '美国', 15 | text: '美国', 16 | checked: false 17 | }, 18 | { 19 | value: '中国', 20 | text: '中国', 21 | checked: true 22 | }, 23 | { 24 | value: '巴西', 25 | text: '巴西', 26 | checked: false 27 | }, 28 | { 29 | value: '日本', 30 | text: '日本', 31 | checked: false 32 | }, 33 | { 34 | value: '英国', 35 | text: '英国', 36 | checked: false 37 | }, 38 | { 39 | value: '法国', 40 | text: '法国', 41 | checked: false 42 | } 43 | ] 44 | } 45 | 46 | radioChange = e => { 47 | const list = this.state.list.map(item => { 48 | item.checked = item.value == e.detail.value 49 | return item 50 | }) 51 | this.setState({ 52 | list, 53 | selectValue: e.detail.value 54 | }) 55 | } 56 | 57 | render() { 58 | return ( 59 | 60 | 61 |
62 | 63 | 64 | 65 | 66 | 默认样式 67 | 68 | 69 | 70 | 选中 71 | 72 | 73 | 未选中 74 | 75 | 76 | 77 | 78 | 79 | 推荐展示样式 80 | 81 | 82 | 83 | 选中的值是: {this.state.selectValue} 84 | 85 | 86 | 87 | {this.state.list.map((item, i) => { 88 | return ( 89 | 97 | ) 98 | })} 99 | 100 | 101 | 102 | 103 | 104 | 105 | ) 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /src/pages/component/pages/checkbox/checkbox.js: -------------------------------------------------------------------------------- 1 | import './checkbox.scss' 2 | import React from 'react' 3 | 4 | import { View, Text, Checkbox, Label, CheckboxGroup } from '@tarojs/components' 5 | 6 | import Header from '../../../../components/head/head' 7 | 8 | export default class PageCheckbox extends React.Component { 9 | state = { 10 | selectValues: ['中国', '法国'], 11 | list: [ 12 | { 13 | value: '美国', 14 | text: '美国', 15 | checked: false 16 | }, 17 | { 18 | value: '中国', 19 | text: '中国', 20 | checked: true 21 | }, 22 | { 23 | value: '巴西', 24 | text: '巴西', 25 | checked: false 26 | }, 27 | { 28 | value: '日本', 29 | text: '日本', 30 | checked: false 31 | }, 32 | { 33 | value: '英国', 34 | text: '英国', 35 | checked: false 36 | }, 37 | { 38 | value: '法国', 39 | text: '法国', 40 | checked: true 41 | } 42 | ] 43 | } 44 | 45 | checkboxChange = e => { 46 | const list = this.state.list.map(item => { 47 | item.checked = e.detail.value.indexOf(item.value) >= 0 48 | return item 49 | }) 50 | this.setState({ 51 | list, 52 | selectValues: e.detail.value 53 | }) 54 | } 55 | 56 | render() { 57 | return ( 58 | 59 | 60 |
61 | 62 | 63 | 64 | 65 | 默认样式 66 | 67 | 68 | 69 | 选中 70 | 71 | 72 | 未选中 73 | 74 | 75 | 76 | 77 | 78 | 推荐展示样式 79 | 80 | 81 | 82 | 当前选择: {this.state.selectValues.join(',')} 83 | 84 | 85 | 86 | 87 | {this.state.list.map(item => { 88 | return ( 89 | 99 | ) 100 | })} 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | ) 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /src/pages/component/pages/input/input.js: -------------------------------------------------------------------------------- 1 | import { View, Text, Input } from '@tarojs/components' 2 | import React from 'react' 3 | 4 | import Header from '../../../../components/head/head' 5 | 6 | import './input.scss' 7 | 8 | export default class PageInput extends React.Component { 9 | state = { 10 | value: '' 11 | } 12 | 13 | onInput = e => { 14 | this.setState({ 15 | value: e.detail.value 16 | }) 17 | } 18 | 19 | render() { 20 | return ( 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 可以自动聚焦的input 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 控制最大输入长度的input 37 | 38 | 39 | 43 | 44 | 45 | 46 | 47 | 实时获取输入值:{this.state.value} 48 | 49 | 50 | 55 | 56 | 57 | 58 | 59 | 数字输入的input 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 密码输入的input 68 | 69 | 70 | 74 | 75 | 76 | 77 | 78 | 身份证输入的input 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 控制占位符颜色的input 87 | 88 | 89 | 93 | 94 | 95 | 96 | 97 | ) 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /src/pages/component/pages/picker/picker.js: -------------------------------------------------------------------------------- 1 | import './picker.scss' 2 | 3 | import Taro from '@tarojs/taro' 4 | import React from 'react' 5 | import { View, Text, Picker } from '@tarojs/components' 6 | 7 | import Header from '../../../../components/head/head' 8 | 9 | export default class PagePicker extends React.Component { 10 | state = { 11 | timeSel: '12:01', 12 | dateSel: '2018-04-22', 13 | selectorValue: 1, 14 | mulitSelectorValues: [0, 0], 15 | selector: ['美国', '中国', '巴西', '日本'], 16 | multiSelector: [['饭', '粥', '粉'], ['猪肉', '牛肉']], 17 | } 18 | 19 | handleChange = e => { 20 | this.setState({ 21 | selectorValue: e.detail.value 22 | }) 23 | } 24 | 25 | handleMulitChange = e => { 26 | const values = e.detail.value.map((item,index) => { 27 | return this.state.multiSelector[index][item] 28 | }) 29 | this.setState({ 30 | mulitSelectorValues: e.detail.value 31 | }) 32 | } 33 | 34 | handleColumnchange = e => { 35 | console.log(e.detail) 36 | } 37 | 38 | handleTimeChange = e => { 39 | this.setState({ 40 | timeSel: e.detail.value 41 | }) 42 | } 43 | 44 | handleDateChange = e => { 45 | const val = e.detail.value 46 | const dateSel = Array.isArray(val) ? val.join('-') : val 47 | this.setState({ dateSel }) 48 | } 49 | 50 | render () { 51 | const { selector, multiSelector, selectorValue, mulitSelectorValues, timeSel, dateSel } = this.state 52 | return ( 53 | 54 |
55 | 56 | 57 | 58 | 普通选择器 59 | 60 | 61 | 66 | 67 | 当前选择：{selector[selectorValue]} 68 | 69 | 70 | 71 | 72 | {Taro.getEnv() !== Taro.ENV_TYPE.ALIPAY 73 | ? 74 | 75 | 多行选择器 76 | 77 | 78 | 83 | 84 | 当前选择： { 85 | `${this.state.multiSelector[0][mulitSelectorValues[0]]}, ${this.state.multiSelector[1][mulitSelectorValues[1]]}` 86 | } 87 | 88 | 89 | 90 | 91 | : 92 | 93 | 支付宝小程序暂不支持多列选择器 94 | 95 | 96 | } 97 | 98 | 99 | 时间选择器 100 | 101 | 102 | 103 | 当前选择：{timeSel} 104 | 105 | 106 | 107 | 108 | 109 | 日期选择器 110 | 111 | 112 | 113 | 当前选择：{dateSel} 114 | 115 | 116 | 117 | 118 | 119 | ) 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /src/pages/component/pages/icon/icon.js: -------------------------------------------------------------------------------- 1 | import './icon.scss' 2 | import { View, Icon } from '@tarojs/components' 3 | import React from 'react' 4 | 5 | import Header from '../../../../components/head/head' 6 | 7 | export default class PageView extends React.Component { 8 | render() { 9 | return ( 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 成功 20 | 用于表示操作顺利完成 21 | 22 | 23 | 24 | 25 | 26 | 提示 27 | 28 | 用于表示信息展示；也常用于缺乏条件的操作拦截，提示用户所需信息 29 | 30 | 31 | 32 | 33 | 34 | 35 | 普通警告 36 | 37 | 用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果 38 | 39 | 40 | 41 | 42 | 43 | 44 | 强烈警告 45 | 46 | 用于表示由于用户原因造成的负向结果；也用于表示操作后引起不可挽回的严重后果的情况 47 | 48 | 49 | 50 | 51 | 52 | 53 | 等待 54 | 55 | 用于表示由于用户原因造成的负向结果；也用于表示操作后引起不可挽回的严重后果的情况 56 | 57 | 58 | 59 | 60 | 61 | 62 | 多选控件图标_已选择 63 | 64 | 用于多选控件中，表示已选择该项目 65 | 66 | 67 | 68 | 69 | 70 | 71 | 错误提示 72 | 73 | 用于在表单中表示出现错误 74 | 75 | 76 | 77 | 78 | 79 | 80 | 单选控件图标_已选择 81 | 82 | 用于单选控件中，表示已选择该项目 83 | 84 | 85 | 86 | 87 | 88 | 89 | 下载 90 | 用于表示可下载 91 | 92 | 93 | 94 | 95 | 96 | 停止或关闭 97 | 98 | 用于在表单中，表示关闭或停止 99 | 100 | 101 | 102 | 103 | 104 | 105 | 搜索 106 | 107 | 用于搜索控件中，表示可搜索 108 | 109 | 110 | 111 | 112 | 113 | 114 | ) 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /src/pages/component/pages/form/form.js: -------------------------------------------------------------------------------- 1 | import './form.scss' 2 | import React from 'react' 3 | 4 | import { 5 | View, 6 | Text, 7 | Label, 8 | Radio, 9 | Checkbox, 10 | Slider, 11 | Input, 12 | Button, 13 | RadioGroup, 14 | Form, 15 | CheckboxGroup, 16 | Switch 17 | } from '@tarojs/components' 18 | 19 | import Header from '../../../../components/head/head' 20 | 21 | export default class PageForm extends React.Component { 22 | state = { 23 | radioItem: [ 24 | { 25 | key: 'radio-1', 26 | value: '选项一', 27 | checked: false 28 | }, 29 | { 30 | key: 'radio-2', 31 | value: '选项二', 32 | checked: false 33 | } 34 | ], 35 | checkItem: [ 36 | { 37 | key: 'checkbox—1', 38 | value: '选项一', 39 | checked: false 40 | }, 41 | { 42 | key: 'checkbox—2', 43 | value: '选项二', 44 | checked: false 45 | } 46 | ], 47 | sliderValue: 50 48 | } 49 | 50 | onHandleChange = e => { 51 | console.log(e) 52 | } 53 | 54 | onRadioChange = e => { 55 | console.log(e) 56 | } 57 | 58 | onCheckChange = e => { 59 | console.log(e) 60 | } 61 | 62 | handleSliderChange = e => { 63 | console.log(e) 64 | } 65 | 66 | handleSliderChanging = e => { 67 | console.log(e) 68 | } 69 | 70 | formSubmit = e => { 71 | console.log(e) 72 | } 73 | 74 | formReset = e => { 75 | console.log(e) 76 | } 77 | 78 | render() { 79 | return ( 80 | 81 | 82 |
83 | 84 |
85 | 86 | 87 | 88 | switch 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | radio 97 | 98 | 99 | 100 | {this.state.radioItem.map(item => { 101 | return ( 102 | 107 | ) 108 | })} 109 | 110 | 111 | 112 | 113 | 114 | checkbox 115 | 116 | 117 | 118 | {this.state.checkItem.map(item => { 119 | return ( 120 | 125 | ) 126 | })} 127 | 128 | 129 | 130 | 131 | 132 | slider 133 | 134 | 135 | 141 | 142 | 143 | 144 | 145 | input 146 | 147 | 148 | 153 | 154 | 155 | 156 | 157 | 160 | 163 | 164 | 165 | 166 |
167 | 168 | ) 169 | } 170 | } 171 | -------------------------------------------------------------------------------- /src/pages/component/index.js: -------------------------------------------------------------------------------- 1 | import './index.scss' 2 | 3 | import Taro, { Component } from '@tarojs/taro' 4 | import React from 'react' 5 | import { View, Image, Text } from '@tarojs/components' 6 | import logo from '../../asset/component/logo.png' 7 | import viewPng from '../../asset/component/view.png' 8 | import contentPng from '../../asset/component/content.png' 9 | import formPng from '../../asset/component/form.png' 10 | import navPng from '../../asset/component/nav.png' 11 | import mediaPng from '../../asset/component/media.png' 12 | import mapPng from '../../asset/component/map.png' 13 | import canvasPng from '../../asset/component/canvas.png' 14 | 15 | const PNGS = { 16 | viewPng, 17 | contentPng, 18 | formPng, 19 | navPng, 20 | mediaPng, 21 | mapPng, 22 | canvasPng 23 | } 24 | 25 | export default class Index extends React.Component { 26 | constructor () { 27 | super(...arguments) 28 | this.state = { 29 | list: [ 30 | { 31 | id: 'view', 32 | name: '视图容器', 33 | open: false, 34 | pages: ['view', 'scroll-view', 'swiper'] 35 | }, 36 | { 37 | id: 'content', 38 | name: '基础内容', 39 | open: false, 40 | pages: ['text', 'icon', 'progress'] 41 | }, 42 | { 43 | id: 'form', 44 | name: '表单组件', 45 | open: false, 46 | pages: [ 47 | 'button', 48 | 'checkbox', 49 | 'form', 50 | 'input', 51 | 'label', 52 | 'picker', 53 | 'picker-view', 54 | 'radio', 55 | 'slider', 56 | 'switch', 57 | 'textarea' 58 | ] 59 | }, 60 | { 61 | id: 'nav', 62 | name: '导航', 63 | open: false, 64 | pages: ['navigator'] 65 | }, 66 | { 67 | id: 'media', 68 | name: '媒体组件', 69 | open: false, 70 | pages: ['image', 'audio', 'video', 'camera'] 71 | }, 72 | { 73 | id: 'map', 74 | name: '地图', 75 | pages: ['map'] 76 | }, 77 | { 78 | id: 'canvas', 79 | name: '画布', 80 | pages: ['canvas'] 81 | } 82 | ] 83 | } 84 | } 85 | 86 | kindToggle = e => { 87 | const id = e.currentTarget.id 88 | const list = this.state.list 89 | for (var i = 0, len = list.length; i < len; ++i) { 90 | if (list[i].id == id) { 91 | list[i].open = !list[i].open 92 | } else { 93 | list[i].open = false 94 | } 95 | } 96 | this.setState({ 97 | list: list 98 | }) 99 | } 100 | 101 | goToComponent = (page, e) => { 102 | Taro.navigateTo({ 103 | url: page.url 104 | }) 105 | } 106 | 107 | render () { 108 | return ( 109 | 110 | 111 | 112 | 113 | 以下将展示Taro官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式。 114 | 115 | 116 | 117 | 118 | {this.state.list 119 | .map((item, index) => { 120 | item.hdClass = 121 | 'kind-list-item-hd ' + 122 | (item.open ? 'kind-list-item-hd-show' : '') 123 | item.bdClass = 124 | 'kind-list-item-bd ' + 125 | (item.open ? 'kind-list-item-bd-show' : '') 126 | item.boxClass = 127 | 'navigator-box ' + (item.open ? 'navigator-box-show' : '') 128 | item.imgSrc = PNGS[`${item.id}Png`] 129 | item._pages = item.pages.map(page => { 130 | return { 131 | page: page, 132 | url: `/pages/component/pages/${page}/${page}` 133 | } 134 | }) 135 | return item 136 | }) 137 | .map((item, index) => { 138 | return ( 139 | 140 | 144 | 145 | {item.name} 146 | 147 | 148 | 149 | 150 | 151 | {item._pages.map((page, index) => { 152 | return ( 153 | 158 | {page.page} 159 | 160 | 161 | ) 162 | })} 163 | 164 | 165 | 166 | ) 167 | })} 168 | 169 | 170 | 171 | ) 172 | } 173 | } 174 | -------------------------------------------------------------------------------- /src/app.scss: -------------------------------------------------------------------------------- 1 | @import './styles/reset.scss'; 2 | @import './styles/mixins.scss'; 3 | 4 | html, body { 5 | margin: 0; 6 | padding: 0; 7 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 8 | outline: 0; 9 | } 10 | 11 | .navigate_btn { 12 | width: 600px; 13 | height: 80px; 14 | text-align: center; 15 | background-color: #5cb85c; 16 | border-color: #4cae4c; 17 | color: #fff; 18 | border-radius: 10px; 19 | line-height: 80px; 20 | font-size: 28px; 21 | margin: 30px; 22 | } 23 | 24 | /* 来自官方示例 */ 25 | /* reset */ 26 | page { 27 | background-color: #f8f8f8; 28 | height: 100%; 29 | font-size: 32px; 30 | line-height: 1.6; 31 | } 32 | 33 | button { 34 | margin-top: 20px; 35 | margin-bottom: 20px; 36 | } 37 | 38 | form { 39 | width: 100%; 40 | } 41 | 42 | textarea { 43 | position: relative; 44 | display: block; 45 | border: 0; 46 | resize: none; 47 | width: 100%; 48 | height: 300px; 49 | color: inherit; 50 | font-size: 1em; 51 | line-height: inherit; 52 | outline: 0; 53 | } 54 | 55 | /* lib */ 56 | .strong { 57 | font-weight: bold; 58 | } 59 | 60 | .tc { 61 | text-align: center; 62 | } 63 | 64 | .taro_page { 65 | min-height: 100%; 66 | background-color: #f8f8f8; 67 | } 68 | 69 | /* page */ 70 | .container { 71 | display: flex; 72 | padding-bottom: 40px; 73 | flex-direction: column; 74 | min-height: 100%; 75 | justify-content: space-between; 76 | font-size: 32px; 77 | @include eject(font-family, ' -apple-system-font, Helvetica Neue, Helvetica, sans-serif'); 78 | } 79 | 80 | .page-head { 81 | padding: 60px 50px 80px; 82 | text-align: center; 83 | } 84 | 85 | .page-head-title { 86 | //display: inline-block; 87 | padding: 0 40px 20px 40px; 88 | font-size: 32px; 89 | color: #bebebe; 90 | } 91 | 92 | .page-head-line { 93 | margin: 0 auto; 94 | width: 150px; 95 | height: 2px; 96 | background-color: #d8d8d8; 97 | } 98 | 99 | .page-head-desc { 100 | padding-top: 20px; 101 | color: #9b9b9b; 102 | font-size: 32px; 103 | } 104 | 105 | .page-body { 106 | width: 100%; 107 | flex-grow: 1; 108 | @include eject(overflow-x, hidden); 109 | } 110 | 111 | .page-body-wrapper { 112 | display: flex; 113 | flex-direction: column; 114 | align-items: center; 115 | width: 100%; 116 | } 117 | 118 | .page-body-wording { 119 | text-align: center; 120 | padding: 200px 100px; 121 | } 122 | 123 | .page-body-info { 124 | display: flex; 125 | flex-direction: column; 126 | align-items: center; 127 | background-color: #fff; 128 | width: 100%; 129 | padding: 50px 0 150px 0; 130 | } 131 | 132 | .page-body-title { 133 | margin-bottom: 100px; 134 | font-size: 32px; 135 | } 136 | 137 | .page-body-text { 138 | font-size: 30px; 139 | line-height: 26px; 140 | color: #ccc; 141 | } 142 | 143 | .page-body-text-small { 144 | font-size: 24px; 145 | color: #000; 146 | margin-bottom: 100px; 147 | } 148 | 149 | .page-foot { 150 | margin: 100px 0 30px 0; 151 | text-align: center; 152 | color: #1aad19; 153 | font-size: 0; 154 | } 155 | 156 | .icon-foot { 157 | width: 152px; 158 | height: 23px; 159 | } 160 | 161 | .page-section { 162 | width: 100%; 163 | text-align: center; 164 | margin-bottom: 60px; 165 | } 166 | 167 | .page-section_center { 168 | display: flex; 169 | flex-direction: column; 170 | align-items: center; 171 | } 172 | 173 | .page-section:last-child { 174 | margin-bottom: 0; 175 | } 176 | 177 | .page-section-gap { 178 | @include eject(box-sizing, border-box); 179 | padding: 0 30px; 180 | } 181 | 182 | .page-section-spacing { 183 | @include eject(box-sizing, border-box); 184 | padding: 0 80px; 185 | } 186 | 187 | .page-section-spacing-reset { 188 | padding: 0 30px; 189 | } 190 | 191 | .page-section-title { 192 | font-size: 28px; 193 | color: #999999; 194 | margin-bottom: 10px; 195 | padding-left: 30px; 196 | padding-right: 30px; 197 | } 198 | 199 | .page-section-gap .page-section-title { 200 | padding-left: 0; 201 | padding-right: 0; 202 | } 203 | 204 | .page-section-ctn { 205 | } 206 | 207 | /* widget */ 208 | .btn-area { 209 | margin-top: 60px; 210 | @include eject(box-sizing, border-box); 211 | width: 100%; 212 | padding: 0 30px; 213 | } 214 | 215 | .image-plus { 216 | width: 150px; 217 | height: 150px; 218 | border: 2px solid #d9d9d9; 219 | position: relative; 220 | } 221 | 222 | .image-plus-nb { 223 | border: 0; 224 | } 225 | 226 | .image-plus-text { 227 | color: #888888; 228 | font-size: 28px; 229 | } 230 | 231 | .image-plus-horizontal { 232 | position: absolute; 233 | top: 50%; 234 | left: 50%; 235 | background-color: #d9d9d9; 236 | width: 4px; 237 | height: 80px; 238 | @include eject(transform, translate(-50%, -50%)); 239 | } 240 | 241 | .image-plus-vertical { 242 | position: absolute; 243 | top: 50%; 244 | left: 50%; 245 | background-color: #d9d9d9; 246 | width: 80px; 247 | height: 4px; 248 | @include eject(transform, translate(-50%, -50%)); 249 | } 250 | 251 | .demo-text-1 { 252 | position: relative; 253 | align-items: center; 254 | justify-content: center; 255 | background-color: #1aad19; 256 | color: #ffffff; 257 | font-size: 36px; 258 | } 259 | 260 | .demo-text-1:before { 261 | content: 'A'; 262 | position: absolute; 263 | top: 50%; 264 | left: 50%; 265 | @include eject(transform, translate(-50%, -50%)); 266 | } 267 | 268 | .demo-text-2 { 269 | position: relative; 270 | align-items: center; 271 | justify-content: center; 272 | background-color: #2782d7; 273 | color: #ffffff; 274 | font-size: 36px; 275 | } 276 | 277 | .demo-text-2:before { 278 | content: 'B'; 279 | position: absolute; 280 | top: 50%; 281 | left: 50%; 282 | @include eject(transform, translate(-50%, -50%)); 283 | } 284 | 285 | .demo-text-3 { 286 | position: relative; 287 | align-items: center; 288 | justify-content: center; 289 | background-color: #f1f1f1; 290 | color: #353535; 291 | font-size: 36px; 292 | } 293 | 294 | .demo-text-3:before { 295 | content: 'C'; 296 | position: absolute; 297 | top: 50%; 298 | left: 50%; 299 | @include eject(transform, translate(-50%, -50%)); 300 | } 301 | 302 | .wxapp-block { 303 | text-align: center; 304 | .sub-title { 305 | display: inline-block; 306 | padding: 60px 50px 10px; 307 | margin-bottom: 40px; 308 | font-size: 0.68267rem; 309 | color: #bebebe; 310 | border-bottom: 1px solid #d8d8d8; 311 | } 312 | } 313 | 314 | // components pages style 315 | 316 | .components-page { 317 | font-size: 32px; 318 | &__body { 319 | padding: 0 40px; 320 | } 321 | .example { 322 | margin-bottom: 60px; 323 | &-header { 324 | text-align: center; 325 | font-size: 34px; 326 | color: #999; 327 | margin-bottom: 20px; 328 | } 329 | &-body { 330 | 331 | } 332 | } 333 | } 334 | -------------------------------------------------------------------------------- /src/pages/component/pages/swiper/swiper.js: -------------------------------------------------------------------------------- 1 | import './swiper.scss' 2 | import React from 'react' 3 | 4 | import { Component } from '@tarojs/taro' 5 | import { 6 | View, 7 | Text, 8 | Swiper, 9 | SwiperItem, 10 | Switch, 11 | Slider 12 | } from '@tarojs/components' 13 | 14 | import Header from '../../../../components/head/head' 15 | 16 | export default class PageView extends React.Component { 17 | constructor() { 18 | super(...arguments) 19 | this.state = { 20 | current: 1, 21 | duration: 500, 22 | interval: 5000, 23 | isCircular: true, 24 | verticalIsCircular: true, 25 | isAutoplay: false, 26 | verticalIsAutoplay: false, 27 | hasIndicatorDots: true, 28 | verticalHasIndicatorDots: true, 29 | } 30 | } 31 | 32 | setAutoPlay = (e) => { 33 | this.setState({ 34 | isAutoplay: e.detail.value 35 | }) 36 | } 37 | 38 | setVerticalAutoPlay = (e) => { 39 | this.setState({ 40 | verticalIsAutoplay: e.detail.value 41 | }) 42 | } 43 | 44 | setCircular = (e) => { 45 | this.setState({ 46 | isCircular: e.detail.value 47 | }) 48 | } 49 | 50 | setVerticalCircular = (e) => { 51 | this.setState({ 52 | verticalIsCircular: e.detail.value 53 | }) 54 | } 55 | 56 | setIndicatorDots = e => { 57 | this.setState({ 58 | hasIndicatorDots: e.detail.value 59 | }) 60 | } 61 | 62 | setVerticalIndicatorDots = e => { 63 | this.setState({ 64 | verticalHasIndicatorDots: e.detail.value 65 | }) 66 | } 67 | 68 | setInterval = e => { 69 | this.setState({ 70 | interval: e.detail.value 71 | }) 72 | } 73 | 74 | setDuration = e => { 75 | console.log(this) 76 | this.setState({ 77 | duration: e.detail.value 78 | }) 79 | } 80 | 81 | render() { 82 | const { current, isAutoplay, duration, isCircular, interval, hasIndicatorDots, verticalIsCircular, verticalHasIndicatorDots, verticalIsAutoplay } = this.state 83 | return ( 84 | 85 | 86 |
87 | 88 | 89 | 90 | 91 | Swiper 横向滑动 92 | 93 | 94 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 指示点 118 | 119 | 120 | 121 | 自动播放 122 | 123 | 124 | 125 | 循环播放 126 | 127 | 128 | 129 | 130 | 131 | 132 | 幻灯片切换时长(ms) 133 | 134 | 135 | 142 | 143 | 144 | 145 | 146 | 自动播放间隔时长(ms) 147 | 148 | 149 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | Swiper 纵向滑动 164 | 165 | 166 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 指示点 190 | 191 | 192 | 193 | 自动播放 194 | 195 | 196 | 197 | 循环播放 198 | 199 | 200 | 201 | 202 | 203 | 204 | ) 205 | } 206 | } 207 | --------------------------------------------------------------------------------