├── pages ├── collapse │ ├── index.json │ ├── index.wxss │ ├── index.wxml │ └── index.js ├── index │ ├── index.json │ ├── index.js │ ├── index.wxss │ └── index.wxml ├── shoppingCart │ ├── index.json │ ├── index.wxss │ ├── index.js │ └── index.wxml ├── form │ ├── index.wxss │ ├── index.json │ ├── index.js │ └── index.wxml ├── icon │ ├── index.wxss │ ├── index.json │ ├── index.wxml │ └── index.js ├── list │ ├── index.wxss │ ├── index.json │ ├── index.js │ └── index.wxml ├── row │ ├── index.wxss │ ├── index.json │ ├── index.wxml │ └── index.js ├── tabs │ ├── index.wxss │ ├── index.json │ ├── index.wxml │ └── index.js ├── badge │ ├── index.wxss │ ├── index.json │ ├── index.wxml │ └── index.js ├── button │ ├── index.wxss │ ├── index.json │ ├── index.js │ └── index.wxml ├── label │ ├── index.wxss │ ├── index.json │ ├── index.wxml │ └── index.js ├── order │ ├── index.wxss │ ├── index.json │ ├── index.js │ └── index.wxml ├── toptip │ ├── index.wxss │ ├── index.json │ ├── index.wxml │ └── index.js ├── nav │ ├── index.wxss │ ├── index.json │ ├── index.js │ └── index.wxml └── modal │ ├── index.json │ ├── index.wxss │ ├── index.js │ └── index.wxml ├── app.js ├── images └── logo.png ├── app.wxss ├── simui ├── simui.js ├── wxss │ ├── label.wxss │ ├── panel.wxss │ ├── tabs.wxss │ ├── toptip.wxss │ ├── modal.wxss │ ├── badge.wxss │ ├── button.wxss │ ├── collapse.wxss │ ├── color.wxss │ ├── order.wxss │ ├── list.wxss │ ├── form.wxss │ ├── shoppingcart.wxss │ └── nav.wxss ├── simui.wxml ├── js │ ├── collapse.js │ └── toptip.js └── simui.wxss ├── app.json ├── README.md ├── project.config.json └── LICENSE /pages/collapse/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | } -------------------------------------------------------------------------------- /pages/shoppingCart/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/form/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/form/index.wxss */ -------------------------------------------------------------------------------- /pages/icon/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/icon/index.wxss */ -------------------------------------------------------------------------------- /pages/list/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/list/index.wxss */ -------------------------------------------------------------------------------- /pages/row/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/row/index.wxss */ -------------------------------------------------------------------------------- /pages/tabs/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/tags/index.wxss */ -------------------------------------------------------------------------------- /pages/badge/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/badge/index.wxss */ -------------------------------------------------------------------------------- /pages/button/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/button/index.wxss */ -------------------------------------------------------------------------------- /pages/label/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/label/index.wxss */ -------------------------------------------------------------------------------- /pages/order/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/orders/index.wxss */ -------------------------------------------------------------------------------- /pages/toptip/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/toptip/index.wxss */ -------------------------------------------------------------------------------- /pages/nav/index.wxss: -------------------------------------------------------------------------------- 1 | .container { 2 | padding-top: 10px; 3 | } -------------------------------------------------------------------------------- /pages/row/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "行" 3 | } -------------------------------------------------------------------------------- /pages/badge/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "消息提醒" 3 | } -------------------------------------------------------------------------------- /pages/button/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "按钮" 3 | } -------------------------------------------------------------------------------- /pages/form/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "表单" 3 | } -------------------------------------------------------------------------------- /pages/icon/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "图标" 3 | } -------------------------------------------------------------------------------- /pages/label/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "标签" 3 | } -------------------------------------------------------------------------------- /pages/list/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "列表" 3 | } -------------------------------------------------------------------------------- /pages/modal/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "模态框" 3 | } -------------------------------------------------------------------------------- /pages/nav/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "导航" 3 | } -------------------------------------------------------------------------------- /pages/order/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "订单列表" 3 | } -------------------------------------------------------------------------------- /pages/shoppingCart/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/shoppingCart/index.wxss */ -------------------------------------------------------------------------------- /pages/tabs/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "标签页" 3 | } -------------------------------------------------------------------------------- /pages/toptip/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "顶部消息" 3 | } -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | onLaunch: function () { 3 | }, 4 | data: { 5 | } 6 | }) 7 | -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simsir-lin/simui-wxapp/HEAD/images/logo.png -------------------------------------------------------------------------------- /pages/modal/index.wxss: -------------------------------------------------------------------------------- 1 | .sim-modal-container { 2 | height: 300rpx; 3 | padding: 20px; 4 | } -------------------------------------------------------------------------------- /pages/collapse/index.wxss: -------------------------------------------------------------------------------- 1 | .menu { 2 | height: 70rpx; 3 | line-height: 70rpx; 4 | text-align: center; 5 | } -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | @import "simui/simui.wxss"; 2 | 3 | .container { 4 | background: #f7f7f7; 5 | min-height: 100vh; 6 | } 7 | -------------------------------------------------------------------------------- /simui/simui.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: simsir-lin 3 | * Github: https://github.com/simsir-lin 4 | * Email: 15986907592@163.com 5 | */ 6 | 7 | exports.TopTip = require('js/toptip'); 8 | exports.Collapse = require('js/collapse'); 9 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | var app = getApp(); 2 | 3 | Page({ 4 | data: { 5 | checked: true 6 | }, 7 | navigateTo(e) { 8 | wx.navigateTo({ 9 | url: e.currentTarget.dataset.url 10 | }) 11 | } 12 | }); 13 | -------------------------------------------------------------------------------- /pages/modal/index.js: -------------------------------------------------------------------------------- 1 | // pages/modal/index.js 2 | Page({ 3 | 4 | data: { 5 | showModal: false 6 | }, 7 | 8 | toggleModal() { 9 | this.setData({ 10 | showModal: !this.data.showModal 11 | }); 12 | } 13 | }) -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | .logo-view { 2 | height: 320rpx; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | .logo-view image { 8 | width: 180rpx; 9 | height: 180rpx; 10 | border-radius: 50%; 11 | border: 2px solid #fff; 12 | } -------------------------------------------------------------------------------- /simui/wxss/label.wxss: -------------------------------------------------------------------------------- 1 | .sim-label { 2 | position: relative; 3 | display: inline-block; 4 | background-color: #999; 5 | color: #fff; 6 | padding: 8rpx 15rpx; 7 | border-radius: 8rpx; 8 | } 9 | 10 | .sim-label+.sim-label { 11 | margin-left: 15rpx; 12 | } 13 | -------------------------------------------------------------------------------- /pages/icon/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 图标 4 | 5 | 请前往 Fontawesome 官网查看 6 | 7 | 8 | -------------------------------------------------------------------------------- /simui/wxss/panel.wxss: -------------------------------------------------------------------------------- 1 | .sim-panel { 2 | padding: 10rpx 0; 3 | } 4 | .sim-panel-title { 5 | display: block; 6 | color: #999; 7 | padding: 10rpx 24rpx; 8 | } 9 | .sim-panel-content { 10 | border-bottom: 1px solid #eee; 11 | border-top: 1px solid #eee; 12 | padding: 20rpx 24rpx; 13 | background-color: #fff; 14 | } -------------------------------------------------------------------------------- /pages/modal/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 内容 10 | 11 | -------------------------------------------------------------------------------- /pages/label/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /simui/wxss/tabs.wxss: -------------------------------------------------------------------------------- 1 | .sim-tabs { 2 | position: relative; 3 | background-color: #fff; 4 | width: 100vw; 5 | display: flex; 6 | padding: 0 10rpx; 7 | flex-wrap: nowrap; 8 | justify-content: space-around; 9 | box-sizing: border-box; 10 | } 11 | 12 | .sim-tabs>text, .sim-tabs>view { 13 | display: inline-block; 14 | padding: 20rpx 10rpx; 15 | } 16 | 17 | .sim-tabs-active { 18 | color: #f36063; 19 | border-bottom: 2px solid #f36063; 20 | } 21 | -------------------------------------------------------------------------------- /pages/row/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 单行信息 4 | 5 | 6 | 单行信息 + 图标 7 | 8 | 9 | 10 | 单行信息 + 文字 11 | 提示信息 12 | 13 | 14 | 单行信息 + 开关 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /pages/tabs/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 标签一 4 | 标签二 5 | 标签三 6 | 7 | 8 | 9 | 标签一 10 | 标签二 11 | 标签三 12 | 标签四 13 | 标签五 14 | 15 | -------------------------------------------------------------------------------- /simui/wxss/toptip.wxss: -------------------------------------------------------------------------------- 1 | .sim-toptip { 2 | display: block; 3 | position: fixed; 4 | -webkit-transform: translateZ(0) translateY(-100%); 5 | width: 100%; 6 | /* 至少有一行的高度，保证第一次动画显示正常 */ 7 | min-height: 32px; 8 | top: 0; 9 | line-height: 2.3; 10 | font-size: 14px; 11 | text-align: center; 12 | color: #FFF; 13 | z-index: 110; 14 | 15 | /* 动画部分 */ 16 | transition: all 0.4s ease; 17 | } 18 | .sim-toptip-show { 19 | -webkit-transform: translateZ(0) translateY(0); 20 | } 21 | -------------------------------------------------------------------------------- /simui/wxss/modal.wxss: -------------------------------------------------------------------------------- 1 | .sim-modal-mask { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | z-index: 10; 8 | background: rgba(0, 0, 0, 0.6); 9 | display: none; 10 | } 11 | .sim-modal-container { 12 | position: fixed; 13 | bottom: 0; 14 | width: 100vw; 15 | background: white; 16 | transform: translateY(150%); 17 | transition: all 0.4s ease; 18 | z-index: 11; 19 | } 20 | .sim-modal-show .sim-modal-container { 21 | transform: translateY(0); 22 | } 23 | .sim-modal-show .sim-modal-mask { 24 | display: block; 25 | } -------------------------------------------------------------------------------- /pages/collapse/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 点击出现折叠框(设置top值) 5 | 6 | 7 | 8 | 点击出现折叠框(没有设置top值) 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /simui/wxss/badge.wxss: -------------------------------------------------------------------------------- 1 | .sim-badge { 2 | position: relative; 3 | display: inline-block; 4 | } 5 | .sim-badge-count,.sim-badge-tip { 6 | position: absolute; 7 | top: -5rpx; 8 | right: -10rpx; 9 | width: 20rpx; 10 | height: 20rpx; 11 | line-height: 20rpx; 12 | text-align: center; 13 | font-size: 16rpx; 14 | border-radius: 50%; 15 | background: #FF4444; 16 | color: #fff; 17 | white-space: nowrap; 18 | z-index: 10; 19 | box-shadow: 0 0 0 1px #fff; 20 | } 21 | .sim-badge-count { 22 | font-size: 18rpx; 23 | padding: 5rpx; 24 | right: -15rpx; 25 | } 26 | .sim-badge-content { 27 | padding: 15rpx; 28 | } -------------------------------------------------------------------------------- /simui/wxss/button.wxss: -------------------------------------------------------------------------------- 1 | .sim-btn { 2 | margin: 20rpx; 3 | } 4 | 5 | .sim-btn-inline { 6 | display: inline-block; 7 | line-height: 60rpx; 8 | } 9 | 10 | .sim-btn-inline+.sim-btn-inline { 11 | margin-left: 20rpx; 12 | } 13 | 14 | .sim-btn-success { 15 | background-color: #25bc1e; 16 | color: #fff; 17 | } 18 | 19 | .sim-btn-error { 20 | background-color: #f36063; 21 | color: #fff; 22 | } 23 | 24 | .sim-btn-warning { 25 | background-color: #f0ad4e; 26 | color: #fff; 27 | } 28 | 29 | .sim-btn-info { 30 | background-color: #33aefd; 31 | color: #fff; 32 | } 33 | 34 | .sim-btn-line { 35 | background: none; 36 | } 37 | -------------------------------------------------------------------------------- /pages/badge/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 红点提醒 7 | 8 | 9 | 10 | 11 | 12 | 13 | 2 14 | 数量提醒 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /simui/wxss/collapse.wxss: -------------------------------------------------------------------------------- 1 | .sim-collapse .sim-collapse-mask { 2 | position: fixed; 3 | left: 0; 4 | right: 0; 5 | bottom: 0; 6 | z-index: 10; 7 | background: rgba(0, 0, 0, 0.4); 8 | display: none; 9 | } 10 | .sim-collapse .sim-collapse-container { 11 | position: fixed; 12 | left: 0; 13 | right: 0; 14 | bottom: 0; 15 | background: #fff; 16 | height: 0px; 17 | z-index: 11; 18 | display: none; 19 | } 20 | .sim-collapse-show .sim-collapse-mask,.sim-collapse-show .sim-collapse-container{ 21 | display: block; 22 | padding: 10rpx 0; 23 | } 24 | .sim-collapse .sim-collapse-container view { 25 | padding-left: 30rpx; 26 | } -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/button/index", 5 | "pages/row/index", 6 | "pages/list/index", 7 | "pages/icon/index", 8 | "pages/form/index", 9 | "pages/tabs/index", 10 | "pages/toptip/index", 11 | "pages/label/index", 12 | "pages/modal/index", 13 | "pages/badge/index", 14 | "pages/nav/index", 15 | "pages/shoppingCart/index", 16 | "pages/collapse/index", 17 | "pages/order/index" 18 | ], 19 | "window": { 20 | "backgroundTextStyle": "light", 21 | "navigationBarBackgroundColor": "#fff", 22 | "navigationBarTitleText": "SIMUI-高颜值的小程序UI", 23 | "navigationBarTextStyle": "black" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # simui-wxapp 2 | SIMUI-高颜值的小程序UI库 3 | ![SIMUI-高颜值的小程序UI库](http://olf3xgrra.bkt.clouddn.com/simui-preview-img.jpg "SIMUI") 4 | 5 | ### 下载 6 | ``` bash 7 | git clone https://github.com/simsir-lin/simui-wxapp.git 8 | ``` 9 | ### 预览 10 | 打开[微信web开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)，'本地小程序项目 - 添加项目'，项目目录选择为 simui-wxapp 的目录就可以了，添加项目后就可以进行组件源码的查看和预览demo了。 11 | 12 | ### 使用 13 | 1. 将 simui-wxapp 目录下的simui文件夹拷贝到你的小程序目录下 14 | 15 | 2. 在你的`app.wxss`直接引入`simui/simui.wxss` 16 | ``` 17 | @import "simui/simui.wxss"; 18 | ``` 19 | 20 | 3. 参考demo使用simui组件 21 | 22 | ### 开源协议 23 | 本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)协议 24 | 25 | ### 贡献 26 | 如果你有好的意见或建议，欢迎给我提issue，让SIMUI-Wxapp更好! 27 | 28 | ### TODO 29 | * 购物车 删除50 添加规格的显示 30 | -------------------------------------------------------------------------------- /pages/toptip/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | {{types[index].title}} 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true 12 | }, 13 | "compileType": "miniprogram", 14 | "libVersion": "2.0.8", 15 | "appid": "wx271792691ca6acb4", 16 | "projectname": "simui", 17 | "isGameTourist": false, 18 | "condition": { 19 | "search": { 20 | "current": -1, 21 | "list": [] 22 | }, 23 | "conversation": { 24 | "current": -1, 25 | "list": [] 26 | }, 27 | "plugin": { 28 | "current": -1, 29 | "list": [] 30 | }, 31 | "game": { 32 | "currentL": -1, 33 | "list": [] 34 | }, 35 | "miniprogram": { 36 | "current": 0, 37 | "list": [ 38 | { 39 | "id": 0, 40 | "name": "mock", 41 | "pathName": "pages/order/index", 42 | "query": "" 43 | } 44 | ] 45 | } 46 | } 47 | } -------------------------------------------------------------------------------- /pages/collapse/index.js: -------------------------------------------------------------------------------- 1 | var simui = require('../../simui/simui'); 2 | 3 | Page(Object.assign({}, simui.Collapse, { 4 | data: { 5 | menu: [{ 6 | title: '综合排序', 7 | }, { 8 | title: '销量优先', 9 | }, { 10 | title: '价格从低到高', 11 | }, { 12 | title: '价格从高到低' 13 | }] 14 | }, 15 | onLoad: function (options) { 16 | 17 | }, 18 | showCollapse() { 19 | this.openSimCollapse({ 20 | menu: this.data.menu 21 | }); 22 | }, 23 | showCollapseBySetTop() { 24 | this.openSimCollapse({ 25 | menu: this.data.menu, 26 | top: '70rpx' 27 | }); 28 | }, 29 | handleSimCollapseMenuTap(e) { 30 | console.log('你点击了"' + this.data.menu[e.currentTarget.dataset.index].title + '"'); 31 | wx.showToast({ 32 | title: '你点击了"' + this.data.menu[e.currentTarget.dataset.index].title + '"', 33 | duration: 2300 34 | }) 35 | this.closeSimCollapse(); 36 | } 37 | })) -------------------------------------------------------------------------------- /pages/icon/index.js: -------------------------------------------------------------------------------- 1 | // pages/list/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) 67 | -------------------------------------------------------------------------------- /pages/list/index.js: -------------------------------------------------------------------------------- 1 | // pages/list/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /pages/nav/index.js: -------------------------------------------------------------------------------- 1 | // pages/nav/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /pages/row/index.js: -------------------------------------------------------------------------------- 1 | // pages/row/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /pages/tabs/index.js: -------------------------------------------------------------------------------- 1 | // pages/tags/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /pages/badge/index.js: -------------------------------------------------------------------------------- 1 | // pages/badge/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /pages/button/index.js: -------------------------------------------------------------------------------- 1 | // pages/button/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /pages/label/index.js: -------------------------------------------------------------------------------- 1 | // pages/label/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /pages/order/index.js: -------------------------------------------------------------------------------- 1 | // pages/orders/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /pages/shoppingCart/index.js: -------------------------------------------------------------------------------- 1 | // pages/shoppingCart/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /simui/simui.wxml: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /pages/shoppingCart/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 商品标题商品标题商品标题商品标题商品标题 11 | 12 | 499 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 总金额： 24 | 45 25 | 26 | 结算 27 | 28 | 29 | -------------------------------------------------------------------------------- /pages/toptip/index.js: -------------------------------------------------------------------------------- 1 | var simui = require('../../simui/simui'); 2 | var app = getApp(); 3 | 4 | Page(Object.assign({}, simui.TopTip, { 5 | data: { 6 | showDialog: false, 7 | types: [{ 8 | 'type': 'default', 9 | title: '默认' 10 | }, { 11 | 'type': 'success', 12 | title: '成功' 13 | }, { 14 | 'type': 'error', 15 | title: '失败' 16 | }, { 17 | 'type': 'warning', 18 | title: '警告' 19 | }, { 20 | 'type': 'info', 21 | title: '提示' 22 | }], 23 | index: 0, 24 | msg: '测试内容' 25 | }, 26 | toggleDialog() { 27 | this.setData({ 28 | showDialog: !this.data.showDialog 29 | }); 30 | }, 31 | bindPickerChange(e) { 32 | this.setData({ 33 | index: e.detail.value 34 | }) 35 | }, 36 | handleInput(e) { 37 | this.setData({ 38 | msg: e.detail.value 39 | }) 40 | }, 41 | show() { 42 | this.showSimTopTip(this.data.msg, this.data.types[this.data.index].type); 43 | } 44 | })); 45 | -------------------------------------------------------------------------------- /simui/wxss/color.wxss: -------------------------------------------------------------------------------- 1 | /*主色: #2B618E*/ 2 | /*default: #888888*/ 3 | /*succss: #25BC1E*/ 4 | /*error: #F36063*/ 5 | /*warning: #F0AD4E*/ 6 | /*info: #33AEFD*/ 7 | 8 | .color-default { 9 | background-color: #888888 !important; 10 | color: #fff !important; 11 | } 12 | .color-success { 13 | background-color: #25BC1E !important; 14 | color: #fff !important; 15 | } 16 | .color-error { 17 | background-color: #F36063 !important; 18 | color: #fff !important; 19 | } 20 | .color-warning { 21 | background-color: #F0AD4E !important; 22 | color: #fff !important; 23 | } 24 | .color-info { 25 | background-color: #33AEFD !important; 26 | color: #fff !important; 27 | } 28 | .text-white { 29 | color: #fff !important; 30 | } 31 | .text-gray,.text-default { 32 | color: #888888 !important; 33 | } 34 | .text-success { 35 | color: #25BC1E !important; 36 | } 37 | .text-error { 38 | color: #F36063 !important; 39 | } 40 | .text-warning { 41 | color: #F0AD4E !important; 42 | } 43 | .text-info { 44 | color: #33AEFD !important; 45 | } 46 | -------------------------------------------------------------------------------- /pages/button/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 块级按钮 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 行级按钮 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /simui/js/collapse.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | openSimCollapse(options) { 3 | let simCollapse = this.data.simCollapse || { 4 | visible: false, 5 | }; 6 | 7 | wx.createSelectorQuery().select('#sim-collapse').boundingClientRect((rect) => { 8 | let defaultOption = { 9 | menuHeight: 40, 10 | menu: [], 11 | top: rect.top + 'px', 12 | height: '160px' 13 | }; 14 | if (options) { 15 | defaultOption = Object.assign(defaultOption, options); 16 | } 17 | 18 | simCollapse.menu = defaultOption.menu || []; 19 | simCollapse.height = defaultOption.height; 20 | simCollapse.menuHeight = defaultOption.menuHeight; 21 | simCollapse.top = defaultOption.top; 22 | 23 | simCollapse.visible = true; 24 | 25 | this.setData({ 26 | simCollapse: simCollapse 27 | }); 28 | }).exec(); 29 | }, 30 | closeSimCollapse() { 31 | this.setData({ 32 | simCollapse: { 33 | visible: false 34 | } 35 | }); 36 | } 37 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 林浩裕 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /pages/form/index.js: -------------------------------------------------------------------------------- 1 | // pages/form/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | items: [ 9 | { name: 'USA', value: '美国' }, 10 | { name: 'CHN', value: '中国', checked: 'true' }, 11 | { name: 'BRA', value: '巴西' }, 12 | { name: 'JPN', value: '日本' }, 13 | ] 14 | }, 15 | 16 | /** 17 | * 生命周期函数--监听页面加载 18 | */ 19 | onLoad: function (options) { 20 | 21 | }, 22 | 23 | /** 24 | * 生命周期函数--监听页面初次渲染完成 25 | */ 26 | onReady: function () { 27 | 28 | }, 29 | 30 | /** 31 | * 生命周期函数--监听页面显示 32 | */ 33 | onShow: function () { 34 | 35 | }, 36 | 37 | /** 38 | * 生命周期函数--监听页面隐藏 39 | */ 40 | onHide: function () { 41 | 42 | }, 43 | 44 | /** 45 | * 生命周期函数--监听页面卸载 46 | */ 47 | onUnload: function () { 48 | 49 | }, 50 | 51 | /** 52 | * 页面相关事件处理函数--监听用户下拉动作 53 | */ 54 | onPullDownRefresh: function () { 55 | 56 | }, 57 | 58 | /** 59 | * 页面上拉触底事件的处理函数 60 | */ 61 | onReachBottom: function () { 62 | 63 | }, 64 | 65 | /** 66 | * 用户点击右上角分享 67 | */ 68 | onShareAppMessage: function () { 69 | 70 | } 71 | }) -------------------------------------------------------------------------------- /simui/wxss/order.wxss: -------------------------------------------------------------------------------- 1 | .sim-order { 2 | background: #fff; 3 | margin-bottom: 20rpx; 4 | border-top: 1px solid #eee; 5 | border-bottom: 1px solid #eee; 6 | } 7 | 8 | .sim-order-header { 9 | display: flex; 10 | border-bottom: 1px solid #f7f7f7; 11 | justify-content: space-between; 12 | padding: 20rpx 30rpx; 13 | align-items: center; 14 | } 15 | 16 | .sim-order-list>view { 17 | display: flex; 18 | padding: 25rpx; 19 | padding-top: 0; 20 | } 21 | 22 | .sim-order-list>view:first-child { 23 | padding-top: 25rpx; 24 | } 25 | 26 | .sim-order-list>view:last-child { 27 | border-bottom: 1px solid #f7f7f7; 28 | } 29 | 30 | .sim-order-list>view image { 31 | width: 140rpx; 32 | height: 140rpx; 33 | } 34 | 35 | .sim-order-list>view view { 36 | margin-left: 20rpx; 37 | display: flex; 38 | flex-direction: column; 39 | } 40 | 41 | .sim-order-list>view view>text { 42 | margin-bottom: 10rpx; 43 | } 44 | 45 | .sim-order-sum { 46 | border-bottom: 1px solid #f7f7f7; 47 | padding: 20rpx 30rpx; 48 | text-align: right; 49 | color: #c83a35; 50 | } 51 | 52 | .sim-order-footer { 53 | text-align: right; 54 | padding: 15rpx 30rpx; 55 | } 56 | -------------------------------------------------------------------------------- /simui/js/toptip.js: -------------------------------------------------------------------------------- 1 | var SIMTOPTIPTYPE = ['default', 'success', 'error', 'info', 'warning']; 2 | 3 | module.exports = { 4 | showSimTopTip(text, options) { 5 | let simTopTip = this.data.simTopTip || {}; 6 | 7 | if (typeof options === 'string') { 8 | let isexist = SIMTOPTIPTYPE.indexOf(options); 9 | if (isexist < 0) { 10 | options = 'default'; 11 | } 12 | options = { 13 | type: options, 14 | duration: 2500 15 | }; 16 | } 17 | if (typeof options === 'number') { 18 | options = { 19 | type: 'default', 20 | duration: options 21 | }; 22 | } 23 | 24 | options = Object.assign({ 25 | duration: 2500, 26 | type: 'default' 27 | }, options); 28 | 29 | if (simTopTip.timer) { 30 | clearTimeout(simTopTip.timer); 31 | simTopTip.timer = undefined; 32 | } 33 | 34 | let timer = setTimeout(() => { 35 | let t = this.data.simTopTip || {}; 36 | t.show = false; 37 | this.setData({ 38 | simTopTip: t 39 | }); 40 | }, options.duration); 41 | 42 | this.setData({ 43 | simTopTip: { 44 | show: true, 45 | text: text, 46 | timer: timer, 47 | type: options.type 48 | } 49 | }); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /simui/wxss/list.wxss: -------------------------------------------------------------------------------- 1 | .sim-list,.sim-list-media { 2 | position: relative; 3 | margin: 20rpx 0; 4 | background-color: #fff; 5 | border-top: 1px solid #eee; 6 | border-bottom: 1px solid #eee; 7 | } 8 | 9 | .sim-list .sim-list-item { 10 | position: relative; 11 | display: flex; 12 | flex-wrap: nowrap; 13 | align-items: center; 14 | padding: 20rpx 24rpx; 15 | background-color: #fff; 16 | border-top: 1px solid #eee; 17 | justify-content: space-between; 18 | } 19 | .sim-list .sim-list-item:first-child { 20 | border-top: none; 21 | } 22 | .sim-list .sim-list-item>text,.sim-list-item>view { 23 | color: #333; 24 | } 25 | 26 | .sim-list-media .sim-list-item { 27 | display: flex; 28 | flex-wrap: wrap; 29 | justify-content: space-between; 30 | } 31 | .sim-list-media .sim-list-item:nth-child(n+2) { 32 | border-top: 1px solid #f7f7f7; 33 | } 34 | .sim-list-media .sim-list-item>view:first-child { 35 | display: flex; 36 | flex-wrap: nowrap; 37 | } 38 | .sim-list-media .sim-list-item>view:first-child image { 39 | height: 90rpx; 40 | width: 90rpx; 41 | padding: 15rpx 0 15rpx 20rpx; 42 | } 43 | .sim-list-media .sim-list-item>view:first-child view { 44 | padding: 15rpx 0 15rpx 20rpx; 45 | } 46 | .sim-list-media .sim-list-item>view:first-child view>text,.sim-list-media .sim-list-item>view:first-child view>view { 47 | display: block; 48 | } 49 | .sim-list-media .sim-list-item>view:nth-child(2) { 50 | padding: 15rpx 20rpx; 51 | align-self: center; 52 | } -------------------------------------------------------------------------------- /pages/form/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 请选择 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 31 | 32 | 33 | 34 | 35 | 36 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /simui/wxss/form.wxss: -------------------------------------------------------------------------------- 1 | .sim-form { 2 | position: relative; 3 | background-color: #fff; 4 | border-top: 1px solid #eee; 5 | border-bottom: 1px solid #eee; 6 | } 7 | 8 | .sim-form-group, .sim-form-textarea, .sim-form-switch { 9 | position: relative; 10 | display: flex; 11 | flex-wrap: wrap; 12 | align-items: center; 13 | padding: 20rpx 24rpx; 14 | background-color: #fff; 15 | border-top: 1px solid #eee; 16 | } 17 | 18 | .sim-form-group:first-child { 19 | border-top: none; 20 | } 21 | 22 | .sim-form-group>label:first-child { 23 | background-color: #fff; 24 | float: left; 25 | width: 160rpx; 26 | } 27 | 28 | .sim-form-group picker view { 29 | color: #666; 30 | } 31 | 32 | .sim-form-option { 33 | padding: 20rpx 24rpx; 34 | display: flex; 35 | flex-wrap: wrap; 36 | border-top: 1px solid #eee; 37 | } 38 | 39 | .sim-form-option>label:first-child { 40 | display: block; 41 | width: 100vw; 42 | } 43 | 44 | .sim-form-option>label:not(:first-child), .sim-form-option checkbox-group>label, 45 | .sim-form-option radio-group>label { 46 | display: flex; 47 | align-items: center; 48 | margin-top: 20rpx; 49 | margin-right: 30rpx; 50 | } 51 | 52 | .sim-form-option checkbox-group, .sim-form-option radio-group { 53 | display: flex; 54 | flex-wrap: wrap; 55 | } 56 | 57 | .sim-form-switch { 58 | justify-content: space-between; 59 | } 60 | 61 | .sim-form-textarea>label:first-child { 62 | align-self: flex-start; 63 | width: 200rpx; 64 | position: relative; 65 | } 66 | 67 | .sim-form-textarea textarea { 68 | margin: 0; 69 | } 70 | 71 | .sim-form-textarea textarea{ 72 | padding: 5rpx 0; 73 | } -------------------------------------------------------------------------------- /pages/list/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 列表信息 6 | 7 | 8 | 列表信息 + 图标 9 | 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 | -------------------------------------------------------------------------------- /pages/order/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9872634872 6 | 已发货 7 | 8 | 9 | 10 | 11 | 12 | 这是一个很长很长很长很长很长很长很长的标题 13 | ¥23 14 | 15 | 16 | 17 | 18 | 总价：¥367 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 这是一个很长很长很长很长很长很长很长的标题 31 | ¥23 32 | 33 | 34 | 35 | 36 | 总价：¥367 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 这是一个很长很长很长很长很长很长很长的标题 49 | ¥23 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /simui/wxss/shoppingcart.wxss: -------------------------------------------------------------------------------- 1 | .sim-cart-item { 2 | width: 100vw; 3 | box-sizing: border-box; 4 | height: 180rpx; 5 | border-bottom: 1px solid #eee; 6 | display: flex; 7 | flex-wrap: nowrap; 8 | background: #fff; 9 | } 10 | 11 | .sim-cart-item:first-child { 12 | border-top: 1px solid #eee; 13 | } 14 | 15 | .sim-cart-item .sim-cart-checkbox { 16 | height: 180rpx; 17 | display: flex; 18 | align-items: center; 19 | flex-wrap: nowrap; 20 | padding: 0 15rpx; 21 | padding-right: 0; 22 | } 23 | 24 | .sim-cart-item .sim-cart-product { 25 | height: 180rpx; 26 | width: 100%; 27 | box-sizing: border-box; 28 | padding: 20rpx 20rpx 20rpx 0rpx; 29 | display: flex; 30 | flex-wrap: nowrap; 31 | } 32 | 33 | .sim-cart-item .sim-cart-product image { 34 | width: 180rpx; 35 | margin-left: 20rpx; 36 | } 37 | 38 | .sim-cart-item .sim-cart-product>view { 39 | width: 100%; 40 | box-sizing: border-box; 41 | padding-left: 20rpx; 42 | display: flex; 43 | flex-direction: column; 44 | justify-content: space-between; 45 | } 46 | 47 | .sim-cart-item .sim-cart-product>view text { 48 | display: block; 49 | } 50 | 51 | .sim-cart-item .sim-cart-product>view view { 52 | display: flex; 53 | height: 50rpx; 54 | justify-content: space-between; 55 | align-items: center; 56 | } 57 | 58 | .sim-cart-item .sim-cart-product>view view button { 59 | height: 50rpx; 60 | line-height: 50rpx; 61 | width: 50rpx; 62 | padding: 0; 63 | font-size: 24rpx; 64 | color: #666; 65 | margin: 0; 66 | border-radius: 0; 67 | } 68 | 69 | .sim-cart-list { 70 | min-height: 100vh; 71 | padding-bottom: 49px; 72 | box-sizing: border-box; 73 | } 74 | 75 | .sim-cart-nav { 76 | background: #fff; 77 | height: 50px; 78 | width: 100vw; 79 | position: fixed; 80 | bottom: 0; 81 | border-top: 1px solid #eee; 82 | padding: 0 0 0 20rpx; 83 | box-sizing: border-box; 84 | display: flex; 85 | justify-content: space-between; 86 | align-items: center; 87 | } 88 | 89 | .sim-cart-nav view:last-child { 90 | height: 50px; 91 | color: #fff; 92 | line-height: 50px; 93 | padding: 0 60rpx; 94 | } 95 | -------------------------------------------------------------------------------- /pages/nav/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 图标 6 | 7 | 8 | 9 | 图标 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 | -------------------------------------------------------------------------------- /simui/simui.wxss: -------------------------------------------------------------------------------- 1 | /* 2 | * Author: simsir-lin 3 | * Github: https://github.com/simsir-lin 4 | * Email: 15986907592@163.com 5 | */ 6 | 7 | .sim-row { 8 | position: relative; 9 | display: flex; 10 | flex-wrap: nowrap; 11 | align-items: center; 12 | padding: 24rpx; 13 | background-color: #fff; 14 | border-top: 1px solid #eee; 15 | border-bottom: 1px solid #eee; 16 | justify-content: space-between; 17 | margin: 20rpx 0; 18 | } 19 | 20 | .sim-row>text, .sim-row>view { 21 | color: #333; 22 | } 23 | 24 | .sim-text-deleted { 25 | text-decoration: line-through; 26 | } 27 | 28 | .sim-text-center { 29 | text-align: center; 30 | } 31 | 32 | .sim-text-right { 33 | text-align: right; 34 | } 35 | 36 | .sim-arrow-right { 37 | position: absolute; 38 | right: 15px; 39 | top: 50%; 40 | display: inline-block; 41 | height: 6px; 42 | width: 6px; 43 | border-width: 2px 2px 0 0; 44 | border-color: #333; 45 | border-style: solid; 46 | transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0); 47 | } 48 | 49 | .sim-arrow-bottom { 50 | display: inline-block; 51 | width: 0; 52 | height: 0; 53 | border-left: 8rpx solid transparent; 54 | border-right: 8rpx solid transparent; 55 | border-top: 10rpx solid #999; 56 | transform: translate(0, -50%); 57 | } 58 | 59 | .sim-clearfix { 60 | zoom: 1; 61 | } 62 | 63 | .sim-clearfix::after { 64 | content: ''; 65 | display: table; 66 | clear: both; 67 | } 68 | @import "wxss/list.wxss"; 69 | @import "wxss/toptip.wxss"; 70 | @import "wxss/form.wxss"; 71 | @import "wxss/tabs.wxss"; 72 | @import "wxss/modal.wxss"; 73 | @import "wxss/badge.wxss"; 74 | @import "wxss/button.wxss"; 75 | @import "wxss/panel.wxss"; 76 | @import "wxss/label.wxss"; 77 | @import "wxss/nav.wxss"; 78 | @import "wxss/order.wxss"; 79 | @import "wxss/shoppingcart.wxss"; 80 | @import "wxss/collapse.wxss"; 81 | @import "wxss/font-awesome.wxss"; 82 | @import "wxss/color.wxss"; 83 | 84 | .fa { 85 | margin: 0 8rpx 0 5rpx; 86 | } 87 | 88 | view, text, navigator, input, button { 89 | font-size: 28rpx; 90 | } 91 | 92 | .sim-text-h1 { 93 | font-size: 52rpx; 94 | } 95 | 96 | .sim-text-h2 { 97 | font-size: 48rpx; 98 | } 99 | 100 | .sim-text-h3 { 101 | font-size: 44rpx; 102 | } 103 | 104 | .sim-text-h4 { 105 | font-size: 40rpx; 106 | } 107 | 108 | .sim-text-h5 { 109 | font-size: 36rpx; 110 | } 111 | 112 | .sim-text-h6 { 113 | font-size: 32rpx; 114 | } 115 | 116 | .sim-text-small { 117 | font-size: 12rpx; 118 | } 119 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 标签 7 | 8 | 9 | 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 | -------------------------------------------------------------------------------- /simui/wxss/nav.wxss: -------------------------------------------------------------------------------- 1 | .sim-nav { 2 | background: #fff; 3 | display: flex; 4 | flex-wrap: wrap; 5 | border-top: 1px solid #eee; 6 | } 7 | 8 | .sim-nav .sim-nav-item { 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | background: #fff; 14 | border-right: 1px solid #eee; 15 | border-bottom: 1px solid #eee; 16 | border-top: 1px solid #eee; 17 | text-align: center; 18 | box-sizing: border-box; 19 | } 20 | .sim-nav .sim-nav-item>.fa,.sim-nav .sim-nav-item>image { 21 | border-radius: 50%; 22 | } 23 | /*.sim-nav .sim-nav-item>image { 24 | height: 100rpx; 25 | width: 100rpx; 26 | margin-bottom: 15rpx; 27 | } 28 | .sim-nav .sim-nav-item>.fa { 29 | font-size: 50rpx; 30 | padding: 25rpx; 31 | margin-bottom: 15rpx; 32 | }*/ 33 | 34 | .sim-nav-col-2 .sim-nav-item { 35 | width: 50vw; 36 | height: 50vw; 37 | } 38 | .sim-nav-col-2 .sim-nav-item:nth-child(2n) { 39 | border-right: none; 40 | } 41 | .sim-nav-col-2 .sim-nav-item:nth-child(n-3) { 42 | border-top: none; 43 | } 44 | .sim-nav-col-2 .sim-nav-item>image { 45 | height: 140rpx; 46 | width: 140rpx; 47 | margin-bottom: 20rpx; 48 | } 49 | .sim-nav-col-2 .sim-nav-item>.fa { 50 | font-size: 70rpx; 51 | padding: 35rpx; 52 | margin-bottom: 20rpx; 53 | } 54 | 55 | .sim-nav-col-3 .sim-nav-item { 56 | width: 33.3vw; 57 | height: 33.3vw; 58 | } 59 | .sim-nav-col-3 .sim-nav-item:nth-child(3n) { 60 | border-right: none; 61 | } 62 | .sim-nav-col-3 .sim-nav-item:nth-child(n-4) { 63 | border-top: none; 64 | } 65 | .sim-nav-col-3 .sim-nav-item>image { 66 | height: 100rpx; 67 | width: 100rpx; 68 | margin-bottom: 15rpx; 69 | } 70 | .sim-nav-col-3 .sim-nav-item>.fa { 71 | font-size: 50rpx; 72 | padding: 25rpx; 73 | margin-bottom: 15rpx; 74 | } 75 | 76 | .sim-nav-col-4 .sim-nav-item { 77 | width: 25vw; 78 | height: 25vw; 79 | } 80 | .sim-nav-col-4 .sim-nav-item:nth-child(4n) { 81 | border-right: none; 82 | } 83 | .sim-nav-col-4 .sim-nav-item:nth-child(n-5) { 84 | border-top: none; 85 | } 86 | .sim-nav-col-4 .sim-nav-item>text { 87 | font-size: 13px; 88 | } 89 | .sim-nav-col-4 .sim-nav-item>image { 90 | height: 86rpx; 91 | width: 86rpx; 92 | margin-bottom: 8rpx; 93 | } 94 | .sim-nav-col-4 .sim-nav-item>.fa { 95 | font-size: 36rpx; 96 | padding: 25rpx; 97 | margin-bottom: 8rpx; 98 | } 99 | 100 | .sim-nav-col-5 .sim-nav-item { 101 | width: 20vw; 102 | height: 20vw; 103 | } 104 | .sim-nav-col-5 .sim-nav-item:nth-child(5n) { 105 | border-right: none; 106 | } 107 | .sim-nav-col-5 .sim-nav-item:nth-child(n-6) { 108 | border-top: none; 109 | } 110 | .sim-nav-col-5 .sim-nav-item>text { 111 | font-size: 12px; 112 | } 113 | .sim-nav-col-5 .sim-nav-item>image { 114 | height: 70rpx; 115 | width: 70rpx; 116 | margin-bottom: 8rpx; 117 | } 118 | .sim-nav-col-5 .sim-nav-item>.fa { 119 | font-size: 30rpx; 120 | padding: 20rpx; 121 | margin-bottom: 8rpx; 122 | } 123 | --------------------------------------------------------------------------------