1.自定义组件应用
文档参考:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
//oamin\project.config.json { "description": "项目配置文件", "packOptions": { "ignore": [], "include": [] }, "setting": { "bundle": false, "userConfirmedBundleSwitch": false, "ignoreDevUnusedFiles": false, "ignoreUploadUnusedFiles": false, "urlCheck": true, "scopeDataCheck": false, "coverView": true, "es6": true, "postcss": true, "compileHotReLoad": false, "lazyloadPlaceholderEnable": false, "preloadBackgroundData": false, "minified": true, "autoAudits": false, "newFeature": false, "uglifyFileName": false, "uploadWithSourceMap": true, "useIsolateContext": true, "nodeModules": false, "enhance": true, "useMultiFrameRuntime": true, "useApiHook": true, "useApiHostProcess": true, "showShadowRootInWxmlPanel": true, "packNpmManually": false, "enableEngineNative": false, "packNpmRelationList": [], "minifyWXSS": true, "showES6CompileOption": false, "minifyWXML": true, "babelSetting": { "ignore": [], "disablePlugins": [], "outputPath": "" } }, "compileType": "miniprogram", "libVersion": "2.19.4", "appid": "wx02e1b4896f9ba974", "projectname": "miniprogram-92", "condition": {}, "editorSetting": { "tabIndent": "insertSpaces", "tabSize": 2 } }
<!--components/tabs/tabs.wxml--> <!-- <text>components/tabs/tabs.wxml</text> --> <view class="tabs"> <view class="tabs_title"> <view wx:for="{{tabList}}" wx:key="id" class="title_item {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}"> <view style="margin-bottom:5rpx">{{item}}</view> <view style="width:30px" class="{{index==tabIndex?'item_active1':''}}"></view> </view> </view> <view class="tabs_content"> <slot></slot> </view> </view>
/* components/tabs/tabs.wxss */ .tabs { position: fixed; top: 0; width: 100%; background-color: #fff; z-index: 99; border-bottom: 1px solid #efefef; padding-bottom: 20rpx; } .tabs_title { /* width: 400rpx; */ width: 90%; display: flex; font-size: 9pt; padding: 0 20rpx; } .title_item { color: #999; padding: 15rpx 0; display: flex; flex: 1; flex-flow: column nowrap; justify-content: center; align-items: center; } .item_active { /* color:#ED8137; */ color: #000000; font-size: 11pt; font-weight: 800; } .item_active1 { /* color:#ED8137; */ color: #000000; font-size: 11pt; font-weight: 800; border-bottom: 6rpx solid #333; border-radius: 2px; } /* components/tabs/tabs.wxss */ .tabs { position: fixed; top: 0; width: 100%; background-color: #fff; z-index: 99; border-bottom: 1px solid #efefef; padding-bottom: 20rpx; } .tabs_title { /* width: 400rpx; */ width: 90%; display: flex; font-size: 9pt; padding: 0 20rpx; } .title_item { color: #999; padding: 15rpx 0; display: flex; flex: 1; flex-flow: column nowrap; justify-content: center; align-items: center; } .item_active { /* color:#ED8137; */ color: #000000; font-size: 11pt; font-weight: 800; } .item_active1 { /* color:#ED8137; */ color: #000000; font-size: 11pt; font-weight: 800; border-bottom: 6rpx solid #333; border-radius: 2px; }
//oamin\pages\meeting\list\list.json { "usingComponents": { "tabs": "/components/tabs/tabs" } }
// components/tabs/tabs.js Component({ /** * 组件的属性列表 */ properties: { tabList:Object }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { handleItemTap(e){ // 获取索引 const {index} = e.currentTarget.dataset; // 触发 父组件的事件 this.triggerEvent("tabsItemChange",{index}) this.setData({ tabIndex:index }) } } })
2.其它界面的布局
<!--pages/ucenter/index/index.wxml--> <!-- <text>pages/ucenter/index/index.wxml</text> --> <view class="user"> <image class="user-img" src="/static/persons/1.jpg"></image> <text class="user-name">牛逼</text> <text class="user-oper">修改</text> </view> <view class="info"> <view class="item1"> <image class="item-icon" src="/static/tabBar/sdk.png"></image> <view class="item-title">我主持的会议</view> <view class="item-num">1</view> <view class="item-open">＞</view> </view> <view class="item2"> <image class="item-icon" src="/static/tabBar/sdk.png"></image> <view class="item-title">我参与的会议</view> <view class="item-num">10</view> <view class="item-open">＞</view> </view> </view> <view class="info"> <view class="item1"> <image class="item-icon" src="/static/tabBar/sdk.png"></image> <view class="item-title">我发布的会议</view> <view class="item-num">1</view> <view class="item-open">＞</view> </view> <view class="item2"> <image class="item-icon" src="/static/tabBar/sdk.png"></image> <view class="item-title">我参与的投票</view> <view class="item-num">10</view> <view class="item-open">＞</view> </view> </view> <view class="info"> <view class="item1"> <image class="item-icon" src="/static/tabBar/sdk.png"></image> <view class="item-title">消息</view> <view class="item-num"></view> <view class="item-open">＞</view> </view> <view class="item2"> <image class="item-icon" src="/static/tabBar/sdk.png"></image> <view class="item-title">设置</view> <view class="item-num"></view> <view class="item-open">＞</view> </view> </view>
/* pages/ucenter/index/index.wxss */ .user { display: flex; align-items: center; border-bottom: 6px solid lightgray; } .user-img { width: 80px; height: 80px; margin: 10px; } .user-name { font-weight: 700; margin: 0 250rpx 0 50rpx; } .user-open { color: lightgray; } /* .info {} */ .item1,.item2 { padding: 5px; display: flex; align-items: center; } .item1{ border-bottom: 1px solid lightgray; } .item2 { border-bottom: 10px solid lightgray; } .item-icon { width: 40px; height: 40px; } .item-title { width: 500rpx; } .item-num { width: 60rpx; } /* .item-open {} */
