diff --git a/.convention-changelog-config.js b/.convention-changelog-config.js new file mode 100644 index 00000000..f7053a42 --- /dev/null +++ b/.convention-changelog-config.js @@ -0,0 +1,10 @@ +'use strict' + +module.exports = { + gitRawCommitsOpts: { + // null => 所有 commit 上的 tag 计入 changelog + // true => 仅 merge commit 上的 tag 计入 changelog + // null => 仅非 merge commit 上的 tag 计入 changelog + merges: null + } +} diff --git a/.gitignore b/.gitignore index 10506d95..c7600508 100644 --- a/.gitignore +++ b/.gitignore @@ -20,3 +20,4 @@ yarn-error.log package-lock.json examples/project.config.json /.run +yarn.lock diff --git a/README.md b/README.md index ac9e54f1..6bf3b8f3 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ ⚡️ 文档网站: http://doc.mini.7yue.pro/
-🔥 教程地址: https://course.7yue.pro +🔥 教程地址: [https://talelin.com](https://talelin.com/#course) @@ -151,9 +151,7 @@ npm install 同样打开根目录，打开`config/style/_theme.less`文件，看到文件中定义了一个变量 `@theme-color` ，如果有主题色修改的需求，更改它即可。 ```less // 主题色 - -@theme-color : #2c61b4; // 主题色 - +@theme-color: #2c61b4; ``` 其他 diff --git a/commitlint.config.js b/commitlint.config.js index ba243967..a3bb25ce 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -13,6 +13,7 @@ module.exports = { 'VuePress', 'package.json', 'README', + 'util', '.editorconfig', '.gitignore', 'commitlint', diff --git a/dist/checkbox-group/index.js b/dist/checkbox-group/index.js index 4cb7b56c..ece05a24 100644 --- a/dist/checkbox-group/index.js +++ b/dist/checkbox-group/index.js @@ -1 +1 @@ -import eventBus from"../utils/eventBus";import rules from"../behaviors/rules";Component({behaviors:["wx://form-field",rules],externalClasses:["l-class","l-error-text","l-error-text-class"],relations:{"../checkbox/index":{type:"child",linked(e){this.init(e)},linkChanged(){},unlinked(){}}},properties:{placement:{type:String,value:"column"},maxSelected:{type:[Number,null],value:null},minSelected:{type:[Number,null],value:null}},data:{},attached(){let{minSelected:e,maxSelected:t}=this.properties;this.checkMax(e,t)},methods:{init(e){void 0===this._keys&&(this._keys={}),void 0===this._selected&&(this._selected={}),this.checkDefaultItem(e),this.checkedKeyRepeat(e)},checkedKeyRepeat(e){let{key:t}=e.properties;if(this._keys[t])throw new Error("keys有重复元素, checkbox的key属性不能重复："+t);this._keys[t]=!0},checkDefaultItem(e){const{key:t,checked:l,cell:s}=e.properties;l&&(this._selected[t]={...s,checked:!0,value:t})},checkMax(e,t){if(null!==e&&e<0)throw new Error("最小选择个数必须大于等于0");if(null!==t&&t<0)throw new Error("最多选择个数必须大于0");if(null!==t&&null!==e&&e>=t)throw new Error("最多选择个数必须大于最小选择个数")},onEmitEventHandle(e){e.checked?this.addSelect(e):this.removeSelect(e.key),this.validatorData({[this.data.name]:Object.values(this._selected)}),this.triggerEvent("linchange",e,{bubbles:!0,composed:!0}),eventBus.emit("lin-form-change-"+this.id,this.id)},onEmitOverflowHandle(e){this.triggerEvent("linout",e,{bubbles:!0,composed:!0})},removeSelect(e){delete this._selected[e]},addSelect(e){let{key:t,...l}=e;this._selected[t]={...l,value:t}},getValues(){return Object.values(this._selected)},reset(){return this._selected={},this.getRelationNodes("../checkbox/index").forEach(e=>e.setData({checked:!1}))}}}); \ No newline at end of file +import eventBus from"../core/utils/event-bus";import rules from"../behaviors/rules";Component({behaviors:["wx://form-field",rules],externalClasses:["l-class","l-error-text","l-error-text-class"],relations:{"../checkbox/index":{type:"child",linked(e){this.init(e)},linkChanged(){},unlinked(){}}},properties:{placement:{type:String,value:"column"},maxSelected:{type:[Number,null],value:null},minSelected:{type:[Number,null],value:null}},data:{},attached(){let{minSelected:e,maxSelected:t}=this.properties;this.checkMax(e,t)},methods:{init(e){void 0===this._keys&&(this._keys={}),void 0===this._selected&&(this._selected={}),this.checkDefaultItem(e),this.checkedKeyRepeat(e)},checkedKeyRepeat(e){let{key:t}=e.properties;if(this._keys[t])throw new Error("keys有重复元素, checkbox的key属性不能重复："+t);this._keys[t]=!0},checkDefaultItem(e){const{key:t,checked:l,cell:s}=e.properties;l&&(this._selected[t]={...s,checked:!0,value:t})},checkMax(e,t){if(null!==e&&e<0)throw new Error("最小选择个数必须大于等于0");if(null!==t&&t<0)throw new Error("最多选择个数必须大于0");if(null!==t&&null!==e&&e>=t)throw new Error("最多选择个数必须大于最小选择个数")},onEmitEventHandle(e){e.checked?this.addSelect(e):this.removeSelect(e.key),this.validatorData({[this.data.name]:Object.values(this._selected)}),this.triggerEvent("linchange",e,{bubbles:!0,composed:!0}),eventBus.emit("lin-form-change-"+this.id,this.id)},onEmitOverflowHandle(e){this.triggerEvent("linout",e,{bubbles:!0,composed:!0})},removeSelect(e){delete this._selected[e]},addSelect(e){let{key:t,...l}=e;this._selected[t]={...l,value:t}},getValues(){return Object.values(this._selected)},reset(){return this._selected={},this.getRelationNodes("../checkbox/index").forEach(e=>e.setData({checked:!1}))}}}); \ No newline at end of file diff --git a/dist/collapse-item/index.js b/dist/collapse-item/index.js index 782946e3..6d2b3643 100644 --- a/dist/collapse-item/index.js +++ b/dist/collapse-item/index.js @@ -1 +1 @@ -import nodeUtil from"../utils/node-util";Component({externalClasses:["l-class","l-title-class","l-body-class"],relations:{"../collapse/index":{type:"parent"}},options:{multipleSlots:!0,pureDataPattern:/^_/},properties:{itemId:{type:String,value:"default"},title:{type:String,value:"默认标题"},customTitle:{type:Boolean,value:!1},disable:{type:Boolean,value:!1},animationTime:{type:String,value:"0.3"}},data:{bodyHeight:"0",isExpandContent:!1,_idDefault:-1},methods:{async onTapTitle(){if(this.data.disable)return;let t=this.getRelationNodes("../collapse/index");await t[0].onTapCollapseItem(this)},async foldContent(){const t=await nodeUtil.getNodeRectFromComponent(this,".container-body-wrapper");this.data.isExpandContent?(this.setData({bodyHeight:t.height+"px"}),setTimeout(()=>{this.setData({isExpandContent:!1,bodyHeight:"0px"})},20)):this.setData({isExpandContent:!1,bodyHeight:"0px"})},async expandContent(){const t=await nodeUtil.getNodeRectFromComponent(this,".container-body-wrapper");this.setData({isExpandContent:!0,bodyHeight:t.height+"px"})},onTransitionend(){this.data.isExpandContent&&this.setData({bodyHeight:"auto"})}}}); \ No newline at end of file +import nodeUtil from"../core/utils/node-util";Component({externalClasses:["l-class","l-title-class","l-body-class"],relations:{"../collapse/index":{type:"parent"}},options:{multipleSlots:!0,pureDataPattern:/^_/},properties:{itemId:{type:String,value:"default"},title:{type:String,value:"默认标题"},customTitle:{type:Boolean,value:!1},disable:{type:Boolean,value:!1},animationTime:{type:String,value:"0.3"}},data:{bodyHeight:"0",isExpandContent:!1,_idDefault:-1},methods:{async onTapTitle(){if(this.data.disable)return;let t=this.getRelationNodes("../collapse/index");await t[0].onTapCollapseItem(this)},async foldContent(){const t=await nodeUtil.getNodeRectFromComponent(this,".container-body-wrapper");this.data.isExpandContent?(this.setData({bodyHeight:t.height+"px"}),setTimeout(()=>{this.setData({isExpandContent:!1,bodyHeight:"0px"})},20)):this.setData({isExpandContent:!1,bodyHeight:"0px"})},async expandContent(){const t=await nodeUtil.getNodeRectFromComponent(this,".container-body-wrapper");this.setData({isExpandContent:!0,bodyHeight:t.height+"px"})},onTransitionend(){this.data.isExpandContent&&this.setData({bodyHeight:"auto"})}}}); \ No newline at end of file diff --git a/dist/combined-tabs/index.js b/dist/combined-tabs/index.js index 2eaa1ba2..ed3b9fc1 100644 --- a/dist/combined-tabs/index.js +++ b/dist/combined-tabs/index.js @@ -1 +1 @@ -Component({externalClasses:["l-class-header","l-class-active","l-class-inactive","l-class-line","l-class-tabimage","l-header-class","l-active-class","l-inactive-class","l-line-class","l-tabimage-class"],relations:{"../tabpanel/index":{type:"child"},linked(){this.initTabs()}},options:{multipleSlots:!0},properties:{activeKey:{type:String,value:"",observer:"changeCurrent"},placement:{type:String,value:"top"},aminmated:Boolean,scrollable:Boolean,swipeable:{type:Boolean,value:!0},hasLine:{type:Boolean,value:!0},activeColor:{type:String,value:"#333333"},inactiveColor:{type:String,value:"#bbbbbb"}},data:{tabList:[],currentIndex:0,transformX:0,transformY:0},ready(){this.initTabs()},methods:{initTabs(){this.initTabList(),this.initActiveIndex()},initActiveIndex(t=this.data.activeKey){let e=t,a=this.data.currentIndex;this.data.tabList.forEach((s,i)=>{e=t||0!==i?e:s.key,a=s.key===e?i:a}),this.setData({activeKey:e,currentIndex:a},()=>{this.data.scrollable&&this.queryMultipleNodes()})},initTabList(){let t=this.getRelationNodes("../tabpanel/index");if(t.length>0){const e=[];t.forEach(t=>{const a=e.findIndex(e=>e.tab===t.data.tab);let s={};-1===a&&(s={tab:t.data.tab,key:t.data.key,icon:t.data.icon,iconStyle:t.data.iconStyle,image:t.data.image,subTabs:[]},e.push(s));const i=-1===a?s:e[a];if(t.data.subTab){i.subTabs=i.subTabs||[];const e={tab:t.data.subTab,key:t.data.subKey};i.subTabs.push(e),i.activeSubKey=this.data.subActiveKey||i.subTabs[0].key,i.subCurrentIndex=0}}),this.setData({tabList:e})}},swiperChange(t){const{source:e,current:a}=t.detail;if("touch"===e){const t=a,e=this.data.tabList[a].key,s=this.data.tabList[t].subCurrentIndex,i=this.data.tabList[t].activeSubKey;this._setChangeData({activeKey:e,currentIndex:t,subCurrentIndex:s,activeSubKey:i})}},subSwiperChange(t){const{source:e,current:a}=t.detail;if("touch"===e){const{currentIndex:t,activeKey:e}=this.data,s=a,i=this.data.tabList[t].subTabs[s].key,n=this.data.tabList[t];n.activeSubKey=i,n.subCurrentIndex=s,this.setData({[`tabList[${t}]`]:n}),this._setChangeData({activeKey:e,currentIndex:t,activeSubKey:i,subCurrentIndex:s})}},handleChange(t){const e="subTab"===t.currentTarget.dataset.headerType,{currentIndex:a,activeKey:s}=this.data,i=t.currentTarget.dataset.index,n=e?i:this.data.tabList[i].subCurrentIndex,r=e?this.data.tabList[a].subTabs[n].key:this.data.tabList[i].activeSubKey;if(e){const t=this.data.tabList[a];t.activeSubKey=r,t.subCurrentIndex=n,this.setData({[`tabList[${a}]`]:t}),this._setChangeData({activeKey:s,currentIndex:a,activeSubKey:r,subCurrentIndex:n})}else{const e=t.currentTarget.dataset.key;this._setChangeData({activeKey:e,currentIndex:i,subCurrentIndex:n,activeSubKey:r})}},_setChangeData({activeKey:t,currentIndex:e,activeSubKey:a="",subCurrentIndex:s=null}){this.setData({activeKey:t,currentIndex:e},()=>{this.data.scrollable&&this.queryMultipleNodes()}),this.triggerEvent("linchange",{activeKey:t,currentIndex:e,activeSubKey:a,subCurrentIndex:s})},queryMultipleNodes(){const{placement:t,activeKey:e,tabList:a}=this.data;this._getRect("#"+e).then(e=>{-1!==["top","bottom"].indexOf(t)?this.setData({transformX:e.left-a.length/2*e.width,transformY:0}):this._getRect(".l-tabs-header").then(t=>{const a=e.top-t.top-t.height/2;this.setData({transformX:0,transformY:a})})})},_getRect(t){return new Promise((e,a)=>{wx.createSelectorQuery().in(this).select(t).boundingClientRect(t=>{if(!t)return a("找不到元素");e(t)}).exec()})}}}); \ No newline at end of file +Component({externalClasses:["l-class-header","l-class-active","l-class-inactive","l-class-line","l-class-tabimage","l-header-class","l-active-class","l-inactive-class","l-line-class","l-tabimage-class","l-content-class"],relations:{"../tabpanel/index":{type:"child"},linked(){this.initTabs()}},options:{multipleSlots:!0},properties:{activeKey:{type:String,value:"",observer:"changeCurrent"},placement:{type:String,value:"top"},aminmated:Boolean,scrollable:Boolean,swipeable:{type:Boolean,value:!0},hasLine:{type:Boolean,value:!0},activeColor:{type:String,value:"#333333"},inactiveColor:{type:String,value:"#bbbbbb"}},data:{tabList:[],currentIndex:0,transformX:0,transformY:0},ready(){this.initTabs()},methods:{initTabs(){this.initTabList(),this.initActiveIndex()},initActiveIndex(t=this.data.activeKey){let e=t,a=this.data.currentIndex;this.data.tabList.forEach((s,i)=>{e=t||0!==i?e:s.key,a=s.key===e?i:a}),this.setData({activeKey:e,currentIndex:a},()=>{this.data.scrollable&&this.queryMultipleNodes()})},initTabList(){let t=this.getRelationNodes("../tabpanel/index");if(t.length>0){const e=[];t.forEach(t=>{const a=e.findIndex(e=>e.tab===t.data.tab);let s={};-1===a&&(s={tab:t.data.tab,key:t.data.key,icon:t.data.icon,iconStyle:t.data.iconStyle,image:t.data.image,subTabs:[]},e.push(s));const i=-1===a?s:e[a];if(t.data.subTab){i.subTabs=i.subTabs||[];const e={tab:t.data.subTab,key:t.data.subKey};i.subTabs.push(e),i.activeSubKey=this.data.subActiveKey||i.subTabs[0].key,i.subCurrentIndex=0}}),this.setData({tabList:e})}},swiperChange(t){const{source:e,current:a}=t.detail;if("touch"===e){const t=a,e=this.data.tabList[a].key,s=this.data.tabList[t].subCurrentIndex,i=this.data.tabList[t].activeSubKey;this._setChangeData({activeKey:e,currentIndex:t,subCurrentIndex:s,activeSubKey:i})}},subSwiperChange(t){const{source:e,current:a}=t.detail;if("touch"===e){const{currentIndex:t,activeKey:e}=this.data,s=a,i=this.data.tabList[t].subTabs[s].key,n=this.data.tabList[t];n.activeSubKey=i,n.subCurrentIndex=s,this.setData({[`tabList[${t}]`]:n}),this._setChangeData({activeKey:e,currentIndex:t,activeSubKey:i,subCurrentIndex:s})}},handleChange(t){const e="subTab"===t.currentTarget.dataset.headerType,{currentIndex:a,activeKey:s}=this.data,i=t.currentTarget.dataset.index,n=e?i:this.data.tabList[i].subCurrentIndex,r=e?this.data.tabList[a].subTabs[n].key:this.data.tabList[i].activeSubKey;if(e){const t=this.data.tabList[a];t.activeSubKey=r,t.subCurrentIndex=n,this.setData({[`tabList[${a}]`]:t}),this._setChangeData({activeKey:s,currentIndex:a,activeSubKey:r,subCurrentIndex:n})}else{const e=t.currentTarget.dataset.key;this._setChangeData({activeKey:e,currentIndex:i,subCurrentIndex:n,activeSubKey:r})}},_setChangeData({activeKey:t,currentIndex:e,activeSubKey:a="",subCurrentIndex:s=null}){this.setData({activeKey:t,currentIndex:e},()=>{this.data.scrollable&&this.queryMultipleNodes()}),this.triggerEvent("linchange",{activeKey:t,currentIndex:e,activeSubKey:a,subCurrentIndex:s})},queryMultipleNodes(){const{placement:t,activeKey:e,tabList:a}=this.data;this._getRect("#"+e).then(e=>{-1!==["top","bottom"].indexOf(t)?this.setData({transformX:e.left-a.length/2*e.width,transformY:0}):this._getRect(".l-tabs-header").then(t=>{const a=e.top-t.top-t.height/2;this.setData({transformX:0,transformY:a})})})},_getRect(t){return new Promise((e,a)=>{wx.createSelectorQuery().in(this).select(t).boundingClientRect(t=>{if(!t)return a("找不到元素");e(t)}).exec()})}}}); \ No newline at end of file diff --git a/dist/combined-tabs/index.wxml b/dist/combined-tabs/index.wxml index 5826f7ca..baab13fa 100644 --- a/dist/combined-tabs/index.wxml +++ b/dist/combined-tabs/index.wxml @@ -4,7 +4,7 @@ - + @@ -14,7 +14,7 @@ - + @@ -22,9 +22,9 @@ - - - + + + @@ -41,4 +41,4 @@ - \ No newline at end of file + diff --git a/dist/core/utils/data-util.js b/dist/core/utils/data-util.js new file mode 100644 index 00000000..b05b799b --- /dev/null +++ b/dist/core/utils/data-util.js @@ -0,0 +1 @@ +class DataUtil{setDiffData(t,a){const e={};Object.keys(a).forEach(s=>{t.data[s]!==a[s]&&(e[s]=a[s])}),Object.keys(e).length&&t.setData(e)}}const dataUtil=new DataUtil;export default dataUtil; \ No newline at end of file diff --git a/dist/core/utils/event-bus.js b/dist/core/utils/event-bus.js new file mode 100644 index 00000000..5307356a --- /dev/null +++ b/dist/core/utils/event-bus.js @@ -0,0 +1 @@ +let EventBus=function(){};var objBus=[],arrBus=[];EventBus.prototype={obj:{set:function(r,u){if(r&&u){var n={};n.k=r,n.v=u;for(var t=0,s=objBus.length;t{r()})},on:function(r,u){if(r&&u){var n={};n.k=r,n.v=u,arrBus.push(n)}},arr:{push:function(r,u){if(r&&u){var n={};n.k=r,n.v=u,arrBus.push(n)}},pop:function(r){if(r)for(var u=0,n=arrBus.length;u{e.createSelectorQuery().select(t).boundingClientRect(e=>{o(e)}).exec()})}async getNodesRectFromComponent(e,t){return await new Promise(o=>{e.createSelectorQuery().selectAll(t).boundingClientRect(e=>{o(e)}).exec()})}async getNodeFieldsFromComponent(e,t,o){return await new Promise(n=>{e.createSelectorQuery().select(t).fields(o,e=>{n(e)}).exec()})}}const nodeUtil=new NodeUtil;export default nodeUtil; \ No newline at end of file diff --git a/dist/core/utils/pixel-util.js b/dist/core/utils/pixel-util.js new file mode 100644 index 00000000..7b6e2707 --- /dev/null +++ b/dist/core/utils/pixel-util.js @@ -0,0 +1 @@ +class PixelUtil{constructor(t){this.systemInfo=t}px2rpx(t){return 750/this.systemInfo.screenWidth*t}rpx2px(t){return t/750*this.systemInfo.screenWidth}}const pixelUtil=new PixelUtil(wx.getSystemInfoSync());export default pixelUtil; \ No newline at end of file diff --git a/dist/form/index.js b/dist/form/index.js index f153d0c9..0064e0ee 100644 --- a/dist/form/index.js +++ b/dist/form/index.js @@ -1 +1 @@ -import eventBus from"../utils/eventBus.js";Component({externalClasses:["l-form-container-class","l-form-submit-class","l-form-reset-class","l-form-btn-class"],options:{multipleSlots:!0},relations:{"../form-item/index":{type:"child",linked:function(t){this._initItem(t)},linkChanged:function(){},unlinked:function(){}}},properties:{name:{type:String,value:""},isSubmitValidate:{type:Boolean,value:!0}},attached(){this._init()},data:{_this:null},methods:{_init(){wx.lin=wx.lin||{},wx.lin.forms=wx.lin.forms||{},wx.lin.forms[this.properties.name]=this,wx.lin.initValidateForm=t=>{wx.lin._instantiation=t},wx.lin.submitForm=function(t){wx.lin.forms[t].submit()},wx.lin.resetForm=function(t){wx.lin.forms[t].reset()}},_initItem(t){this._keys=this._keys||{},this._errors=this._errors||{};const e=t.properties.name;if(eventBus.on("lin-form-blur-"+e,t=>{this._validateItem(t,"blur")}),eventBus.on("lin-form-change-"+e,t=>{clearTimeout(this.change_time),this.change_time=setTimeout(()=>{this._validateItem(t,"change")},200)}),this._keys[e])throw new Error("表单项存在重复的name："+e);this._keys[e]="",this._errors[e]=[]},_validateItem(t,e){let i=wx.lin._instantiation,s=this._getValues();const n=this.getRelationNodes("../form-item/index").find(e=>e.properties.name===t);if(!i.selectComponent("#"+t))throw new Error("表单项不存在name："+t);return n.validatorData(s,e),this._errors[t]=n.data.errors,n.data.errors},_forEachNodes(t,e){let i=this.getRelationNodes("../form-item/index");e&&i.reverse(),i.forEach((e,i)=>{t(e,i)})},_validateForm(){let t=wx.lin._instantiation,e=[],i=this._getValues();return this._forEachNodes(s=>{const n=s.properties.name;if(!t.selectComponent("#"+n))throw new Error("表单项不存在name："+n);s.validatorData(i),this._errors[n]=s.data.errors,e=e.concat(s.data.errors)},!0),e},_getValues(){let t={},e=wx.lin._instantiation;return this._forEachNodes(i=>{const s=i.properties.name,n=e.selectComponent("#"+s);n&&(t[s]=n.getValues())}),t},submit(){let t=this.data.isSubmitValidate?this._validateForm():[];this.triggerEvent("linsubmit",{values:this._getValues(),errors:this.data.isSubmitValidate?this._errors:{},isValidate:0===t.length})},reset(){let t=wx.lin._instantiation;this._forEachNodes(e=>{e.setData({errorText:""});const i=e.properties.name,s=t.selectComponent("#"+i);s&&s.reset()})}}}); \ No newline at end of file +import eventBus from"../core/utils/event-bus.js";Component({externalClasses:["l-form-container-class","l-form-submit-class","l-form-reset-class","l-form-btn-class"],options:{multipleSlots:!0},relations:{"../form-item/index":{type:"child",linked:function(t){this._initItem(t)},linkChanged:function(){},unlinked:function(){}}},properties:{name:{type:String,value:""},isSubmitValidate:{type:Boolean,value:!0}},attached(){this._init()},data:{_this:null},methods:{_init(){wx.lin=wx.lin||{},wx.lin.forms=wx.lin.forms||{},wx.lin.forms[this.properties.name]=this,wx.lin.initValidateForm=t=>{wx.lin._instantiation=t},wx.lin.submitForm=function(t){wx.lin.forms[t].submit()},wx.lin.resetForm=function(t){wx.lin.forms[t].reset()}},_initItem(t){this._keys=this._keys||{},this._errors=this._errors||{};const e=t.properties.name;if(eventBus.on("lin-form-blur-"+e,t=>{this._validateItem(t,"blur")}),eventBus.on("lin-form-change-"+e,t=>{clearTimeout(this.change_time),this.change_time=setTimeout(()=>{this._validateItem(t,"change")},200)}),this._keys[e])throw new Error("表单项存在重复的name："+e);this._keys[e]="",this._errors[e]=[]},_validateItem(t,e){let i=wx.lin._instantiation,s=this._getValues();const r=this.getRelationNodes("../form-item/index").find(e=>e.properties.name===t);if(!i.selectComponent("#"+t))throw new Error("表单项不存在name："+t);return r.validatorData(s,e),this._errors[t]=r.data.errors,r.data.errors},_forEachNodes(t,e){let i=this.getRelationNodes("../form-item/index");e&&i.reverse(),i.forEach((e,i)=>{t(e,i)})},_validateForm(){let t=wx.lin._instantiation,e=[],i=this._getValues();return this._forEachNodes(s=>{const r=s.properties.name;if(!t.selectComponent("#"+r))throw new Error("表单项不存在name："+r);s.validatorData(i),this._errors[r]=s.data.errors,e=e.concat(s.data.errors)},!0),e},_getValues(){let t={},e=wx.lin._instantiation;return this._forEachNodes(i=>{const s=i.properties.name,r=e.selectComponent("#"+s);r&&(t[s]=r.getValues())}),t},submit(){let t=this.data.isSubmitValidate?this._validateForm():[];this.triggerEvent("linsubmit",{values:this._getValues(),errors:this.data.isSubmitValidate?this._errors:{},isValidate:0===t.length})},reset(){let t=wx.lin._instantiation;this._forEachNodes(e=>{e.setData({errorText:""});const i=e.properties.name,s=t.selectComponent("#"+i);s&&s.reset()})}}}); \ No newline at end of file diff --git a/dist/index-anchor/index.js b/dist/index-anchor/index.js index 4d3490eb..426dc280 100644 --- a/dist/index-anchor/index.js +++ b/dist/index-anchor/index.js @@ -1 +1 @@ -import nodeUtil from"../utils/node-util";Component({externalClasses:["l-anchor-class"],options:{multipleSlots:!0,pureDataPattern:/^_/},relations:{"../index-list/index":{type:"parent"}},data:{anchorSlot:{height:-1},anchor:{height:0},anchorText:"",anchorStyle:"",anchorWrapperStyle:""},lifetimes:{attached(){this.parseAnchorSlotRect()}},methods:{async parseAnchorSlotRect(){const t=await nodeUtil.getNodeRectFromComponent(this,".anchor-slot");t?this.setData({"anchorSlot.height":t.height}):this.setData({"anchorSlot.height":0})},async parseAnchorRect(){const t=await nodeUtil.getNodeRectFromComponent(this,".anchor");t&&this.setData({"anchor.height":t.height})},setFixed(t,e){const a=`\n position:fixed;\n top:${t}rpx;\n `,n=`height:${e}px;`;this.setData({anchorStyle:a,anchorWrapperStyle:n})},setRelative(t){const e=`\n position:relative;\n transform: translate3d(0, ${t}px, 0);\n `;this.setData({anchorStyle:e})},clearStyle(){this.setData({anchorStyle:"",anchorWrapperStyle:""})},isRelative(){return this.data.anchorStyle.indexOf("relative")>0},isFixed(){return this.data.anchorStyle.indexOf("fixed")>0}}}); \ No newline at end of file +import nodeUtil from"../core/utils/node-util";Component({externalClasses:["l-anchor-class"],options:{multipleSlots:!0,pureDataPattern:/^_/},relations:{"../index-list/index":{type:"parent"}},data:{anchorSlot:{height:-1},anchor:{height:0},anchorText:"",anchorStyle:"",anchorWrapperStyle:""},lifetimes:{attached(){this.parseAnchorSlotRect()}},methods:{async parseAnchorSlotRect(){const t=await nodeUtil.getNodeRectFromComponent(this,".anchor-slot");t?this.setData({"anchorSlot.height":t.height}):this.setData({"anchorSlot.height":0})},async parseAnchorRect(){const t=await nodeUtil.getNodeRectFromComponent(this,".anchor");t&&this.setData({"anchor.height":t.height})},setFixed(t,e){const a=`\n position:fixed;\n top:${t}rpx;\n `,o=`height:${e}px;`;this.setData({anchorStyle:a,anchorWrapperStyle:o})},setRelative(t){const e=`\n position:relative;\n transform: translate3d(0, ${t}px, 0);\n `;this.setData({anchorStyle:e})},clearStyle(){this.setData({anchorStyle:"",anchorWrapperStyle:""})},isRelative(){return this.data.anchorStyle.indexOf("relative")>0},isFixed(){return this.data.anchorStyle.indexOf("fixed")>0}}}); \ No newline at end of file diff --git a/dist/index-list/index.js b/dist/index-list/index.js index cbaca33f..aaea86de 100644 --- a/dist/index-list/index.js +++ b/dist/index-list/index.js @@ -1 +1 @@ -import nodeUtil from"../utils/node-util";import dataUtil from"../utils/data-util";import eventUtil from"../utils/event-util";import pixelUtil from"../utils/pixel-util";const defaultSidebarData=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];Component({externalClasses:["l-tip-class","l-tip-text-class","l-sidebar-class","l-selected-class","l-unselected-class"],relations:{"../index-anchor/index":{type:"child"}},options:{multipleSlots:!0,pureDataPattern:/^_/},lifetimes:{async attached(){this.init()}},properties:{isStick:{type:Boolean,value:!1},scrollTop:{type:Number,value:0},sidebarData:{type:Array,value:defaultSidebarData},showSidebar:{type:Boolean,value:!0},stickOffsetTop:{type:Number,value:0}},data:{_sidebar:{top:0,height:0,sidebarItemCenterPoints:[],isMoving:!1},_anchor:{anchorTopLocations:[],indexAnchorComponents:[],currentStickAnchorIndex:-1,anchorItemsHeight:[]},_stickOffsetTopPx:0,activeSidebarItem:0,tipTop:0,showTip:!1},observers:{scrollTop:function(t){this.setIndexListStyle(t)},stickOffsetTop:function(t){this.setData({_stickOffsetTopPx:pixelUtil.rpx2px(t)})}},methods:{async init(){await this.parseSidebarRect(),this.parseSidebarItemRect(),await this.parseIndexAnchors(),this.parseAnchorRect(),wx.lin=wx.lin||{},wx.lin.setScrollTop=t=>{dataUtil.setDiffData(this,{scrollTop:t})}},async parseSidebarRect(){const t=await nodeUtil.getNodeRectFromComponent(this,".sidebar");this.setData({"_sidebar.height":t.height,"_sidebar.top":t.top})},parseSidebarItemRect(){const t=this.data.sidebarData.length,e=this.data._sidebar.height/t,i=[];for(let a=0;a=n&&t+c<=h-r&&!o.isFixed()){o.setFixed(this.data.stickOffsetTop,r);for(let t=0;th-r&&t+ca-1&&(o=a-1);const n=this.data.sidebarData[o];dataUtil.setDiffData(this,{tipText:n,activeSidebarItem:o,tipTop:this.data._sidebar.sidebarItemCenterPoints[o]});let r=this.data._anchor.anchorTopLocations[o]-this.data._stickOffsetTopPx;wx.pageScrollTo({duration:0,scrollTop:r}),eventUtil.emit(this,"linselected",{index:o,tipText:n})},onTouchend(){setTimeout(()=>{this.switchTipShow(!1)},300),this.switchIsMovingSidebar(!1)}}}); \ No newline at end of file +import nodeUtil from"../core/utils/node-util";import dataUtil from"../core/utils/data-util";import eventUtil from"../core/utils/event-util";import pixelUtil from"../core/utils/pixel-util";const defaultSidebarData=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];Component({externalClasses:["l-tip-class","l-tip-text-class","l-sidebar-class","l-selected-class","l-unselected-class"],relations:{"../index-anchor/index":{type:"child"}},options:{multipleSlots:!0,pureDataPattern:/^_/},lifetimes:{attached(){this.init()}},properties:{isStick:{type:Boolean,value:!1},scrollTop:{type:Number,value:0},sidebarData:{type:Array,value:defaultSidebarData},showSidebar:{type:Boolean,value:!0},stickOffsetTop:{type:Number,value:0}},data:{_sidebar:{top:0,height:0,sidebarItemCenterPoints:[],isMoving:!1,sidebarItemRect:{}},_anchor:{anchorTopLocations:[],indexAnchorComponents:[],currentStickAnchorIndex:-1,anchorItemsHeight:[]},_stickOffsetTopPx:0,activeSidebarItem:0,tipTop:0,showTip:!1,tipHeight:0},observers:{scrollTop:function(t){this.setIndexListStyle(t)},stickOffsetTop:function(t){this.setData({_stickOffsetTopPx:pixelUtil.rpx2px(t)})}},methods:{async init(){await this.parseSidebarRect(),await this.parseSidebarItemRect(),await this.parseIndexAnchors(),this.parseAnchorRect(),wx.lin=wx.lin||{},wx.lin.setScrollTop=t=>{dataUtil.setDiffData(this,{scrollTop:t})}},async parseSidebarRect(){const t=await nodeUtil.getNodeRectFromComponent(this,".sidebar");this.setData({"_sidebar.height":t.height,"_sidebar.top":t.top})},async parseSidebarItemRect(){const t=this.data.sidebarData.length,e=await nodeUtil.getNodeRectFromComponent(this,".sidebar-item"),i=this.data._sidebar.height/t,a=e.height,s=await nodeUtil.getNodeFieldsFromComponent(this,".sidebar-item",{computedStyle:["margin-top"]}),o=await nodeUtil.getNodeFieldsFromComponent(this,".tip",{computedStyle:["height"]}),n=[],r=s["margin-top"].replace("px","");for(let e=1;e<=t;e++)n.push((2*e-1)*a/2+e*parseInt(r));const h=parseInt(o.height.replace("px",""));this.setData({tipHeight:h,tipHeightOverflow:.205*h,"_sidebar.sidebarItemRect":e,"_sidebar.sidebarItemHeight":i,"_sidebar.sidebarItemRealHeight":a,"_sidebar.sidebarItemCenterPoints":n})},parseIndexAnchors(){const t=this.getRelationNodes("../index-anchor/index");if(t){this.setData({"_anchor.indexAnchorComponents":t});for(let e=0;e=n&&t+c<=h-r&&!o.isFixed()){o.setFixed(this.data.stickOffsetTop,r);for(let t=0;th-r&&t+ca-1&&(o=a-1);const n=this.data.sidebarData[o];dataUtil.setDiffData(this,{tipText:n,activeSidebarItem:o,tipTop:this.data._sidebar.sidebarItemCenterPoints[o]});let r=this.data._anchor.anchorTopLocations[o]-this.data._stickOffsetTopPx;wx.pageScrollTo({duration:0,scrollTop:r}),eventUtil.emit(this,"linselected",{index:o,tipText:n})},onTouchend(){setTimeout(()=>{this.switchTipShow(!1)},500),this.switchIsMovingSidebar(!1)},onTapSidebar(t){this.onTouchMove(t)}}}); \ No newline at end of file diff --git a/dist/index-list/index.wxml b/dist/index-list/index.wxml index 9f391a40..acbc8630 100644 --- a/dist/index-list/index.wxml +++ b/dist/index-list/index.wxml @@ -1,12 +1,12 @@ - + {{sidebarItem}} - + {{tipText}} diff --git a/dist/index-list/index.wxss b/dist/index-list/index.wxss index 7e39d16f..9b5ddd9a 100644 --- a/dist/index-list/index.wxss +++ b/dist/index-list/index.wxss @@ -1 +1 @@ -.index-list .sidebar{font-size:20rpx;position:fixed;right:20rpx;width:20rpx;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center}.index-list .sidebar-item{width:16px;height:16px;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-top:6rpx}.index-list .sidebar-item-active{color:#fff;background-color:#3963bc}.index-list .tip{width:90rpx;height:90rpx;background-color:#d8d8d8;border-radius:90px 90px 0;display:flex;justify-content:center;align-items:center;position:absolute;left:-160rpx;transform:rotate(-45deg) translateY(-35%)}.index-list .tip-text{font-size:30rpx;transform:rotate(45deg)} \ No newline at end of file +.index-list .sidebar{font-size:24rpx;position:fixed;right:30rpx;width:20rpx;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center}.index-list .sidebar-item{width:40rpx;height:40rpx;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-top:8rpx}.index-list .sidebar-item-active{color:#fff;background-color:#3963bc}.index-list .tip{width:90rpx;height:90rpx;background-color:#d8d8d8;border-radius:90px 90px 0;display:flex;justify-content:center;align-items:center;position:absolute;left:-160rpx;transform:rotate(-45deg) translateY(-35%)}.index-list .tip-text{font-size:30rpx;transform:rotate(45deg)} \ No newline at end of file diff --git a/dist/input/index.js b/dist/input/index.js index bc905f3e..cd75c083 100644 --- a/dist/input/index.js +++ b/dist/input/index.js @@ -1 +1 @@ -import eventBus from"../utils/eventBus.js";import validator from"../behaviors/validator";import rules from"../behaviors/rules";Component({options:{multipleSlots:!0},behaviors:["wx://form-field",validator,rules],externalClasses:["l-class","l-label-class","l-error-text","l-error-text-class"],properties:{label:String,hideLabel:Boolean,labelCustom:Boolean,showRow:{type:Boolean,value:!0},required:Boolean,placeholder:String,type:{type:String,value:"text",options:["text","idcard","digit","password","number"]},value:String,colon:Boolean,focus:Boolean,clear:Boolean,maxlength:{type:Number,value:140},width:{type:Number,value:750},labelWidth:{type:Number,value:200},labelLayout:{type:String,value:"left",options:["left","right"]},disabled:Boolean,placeholderStyle:String},data:{},attached(){},methods:{handleInputChange(e){const{detail:t={}}=e,{value:l=""}=t;this.setData({value:l}),eventBus.emit("lin-form-change-"+this.id,this.id),this.triggerEvent("lininput",e.detail)},handleInputFocus(e){this.triggerEvent("linfocus",e.detail)},handleInputBlur(e){this.validatorData({[this.data.name]:e.detail.value}),eventBus.emit("lin-form-blur-"+this.id,this.id),this.triggerEvent("linblur",e.detail)},handleInputConfirm(e){const{detail:t={}}=e,{value:l=""}=t;this.setData({value:l}),this.triggerEvent("linconfirm",e.detail)},onClearTap(e){this.setData({value:""}),this.triggerEvent("linclear",e.detail)},getValues(){return this.data.value},reset(){this.setData({value:""})}}}); \ No newline at end of file +import eventBus from"../core/utils/event-bus.js";import validator from"../behaviors/validator";import rules from"../behaviors/rules";Component({options:{multipleSlots:!0},behaviors:["wx://form-field",validator,rules],externalClasses:["l-class","l-label-class","l-error-text","l-error-text-class"],properties:{label:String,hideLabel:Boolean,labelCustom:Boolean,showRow:{type:Boolean,value:!0},required:Boolean,placeholder:String,type:{type:String,value:"text",options:["text","idcard","digit","password","number"]},value:String,colon:Boolean,focus:Boolean,clear:Boolean,maxlength:{type:Number,value:140},width:{type:Number,value:750},labelWidth:{type:Number,value:200},labelLayout:{type:String,value:"left",options:["left","right"]},disabled:Boolean,placeholderStyle:String},data:{},attached(){},methods:{handleInputChange(e){const{detail:t={}}=e,{value:l=""}=t;this.setData({value:l}),eventBus.emit("lin-form-change-"+this.id,this.id),this.triggerEvent("lininput",e.detail)},handleInputFocus(e){this.triggerEvent("linfocus",e.detail)},handleInputBlur(e){this.validatorData({[this.data.name]:e.detail.value}),eventBus.emit("lin-form-blur-"+this.id,this.id),this.triggerEvent("linblur",e.detail)},handleInputConfirm(e){const{detail:t={}}=e,{value:l=""}=t;this.setData({value:l}),this.triggerEvent("linconfirm",e.detail)},onClearTap(e){this.setData({value:""}),this.triggerEvent("linclear",e.detail)},getValues(){return this.data.value},reset(){this.setData({value:""})}}}); \ No newline at end of file diff --git a/dist/input/index.wxml b/dist/input/index.wxml index 783c49a3..8bdc67c0 100644 --- a/dist/input/index.wxml +++ b/dist/input/index.wxml @@ -1,5 +1,5 @@ - - + - + diff --git a/dist/tag/index.js b/dist/tag/index.js index a8742d8e..9ef734a9 100644 --- a/dist/tag/index.js +++ b/dist/tag/index.js @@ -1 +1 @@ -import validator from"../behaviors/validator";Component({externalClasses:["l-class","l-select-class","l-image-class"],behaviors:[validator],properties:{name:String,cell:Object,type:{type:String,value:"touch",options:["reading","touch"]},bgColor:String,fontColor:String,disable:Boolean,shape:{type:String,value:"square",options:["square","circle"]},select:Boolean,plain:Boolean,size:{type:String,value:"medium",options:["large","medium","mini","super-mini"]},location:{type:String,value:"left",options:["left","right"]},icon:String,iconSize:{type:String,value:"20"},iconColor:{type:String,value:"#3683D6"},image:String,iconStyle:{type:String,value:"size:20;color:#3683D6"},height:Number},methods:{handleTap(){if(this.data.disable)return;let e={name:this.properties.name,cell:this.properties.cell,select:this.properties.select};this.triggerEvent("lintap",e,{bubbles:!0,composed:!0})}}}); \ No newline at end of file +import validator from"../behaviors/validator";Component({externalClasses:["l-class","l-select-class","l-image-class"],behaviors:[validator],properties:{name:String,cell:Object,type:{type:String,value:"touch",options:["reading","touch"]},bgColor:String,fontColor:String,disable:Boolean,shape:{type:String,value:"square",options:["square","circle"]},select:Boolean,plain:Boolean,size:{type:String,value:"medium",options:["large","medium","mini","super-mini"]},location:{type:String,value:"left",options:["left","right"]},icon:String,iconSize:{type:String,value:"20"},iconColor:{type:String,value:"#3683D6"},image:String,iconStyle:{type:String,value:"size:20;color:#3683D6"},height:Number},methods:{handleTap(){if(this.data.disable)return;let e={name:this.data.name,cell:this.data.cell,select:this.data.select};this.triggerEvent("lintap",e,{bubbles:!0,composed:!0})}}}); \ No newline at end of file diff --git a/dist/textarea/index.js b/dist/textarea/index.js index 83246737..5a1df7f8 100644 --- a/dist/textarea/index.js +++ b/dist/textarea/index.js @@ -1 +1 @@ -import rules from"../behaviors/rules";import eventBus from"../utils/eventBus";Component({behaviors:["wx://form-field",rules],externalClasses:["l-class","l-error-text","l-error-text-class","l-inner-class"],properties:{placeholder:{type:String,value:""},value:{type:String,value:""},focus:{type:Boolean,value:!1},maxlength:{type:Number,value:140},indicator:{type:Boolean,value:!0},autoHeight:{type:Boolean,value:!1},disabled:{type:Boolean,value:!1},border:{type:Boolean,value:!0},rules:{type:Object},placeholderStyle:{type:String,value:""}},data:{},attached(){this.initRules()},methods:{handleInputChange(e){const{detail:t={}}=e,{value:l=""}=t;this.setData({value:l}),eventBus.emit("lin-form-change-"+this.id,this.id),this.triggerEvent("lininput",e.detail)},handleInputFocus(e){this.triggerEvent("linfocus",e.detail)},handleInputBlur(e){this.validatorData({[this.data.name]:e.detail.value}),eventBus.emit("lin-form-blur-"+this.id,this.id),this.triggerEvent("linblur",e.detail)},handleInputConfirm(e){this.triggerEvent("linconfirm",e.detail)},getValues(){return this.data.value},reset(){this.data.value=""}}}); \ No newline at end of file +import rules from"../behaviors/rules";import eventBus from"../core/utils/event-bus";Component({behaviors:["wx://form-field",rules],externalClasses:["l-class","l-error-text","l-error-text-class","l-inner-class"],properties:{placeholder:{type:String,value:""},value:{type:String,value:""},focus:{type:Boolean,value:!1},maxlength:{type:Number,value:140},indicator:{type:Boolean,value:!0},autoHeight:{type:Boolean,value:!1},disabled:{type:Boolean,value:!1},border:{type:Boolean,value:!0},rules:{type:Object},placeholderStyle:{type:String,value:""}},data:{},attached(){this.initRules()},methods:{handleInputChange(e){const{detail:t={}}=e,{value:l=""}=t;this.setData({value:l}),eventBus.emit("lin-form-change-"+this.id,this.id),this.triggerEvent("lininput",e.detail)},handleInputFocus(e){this.triggerEvent("linfocus",e.detail)},handleInputBlur(e){this.validatorData({[this.data.name]:e.detail.value}),eventBus.emit("lin-form-blur-"+this.id,this.id),this.triggerEvent("linblur",e.detail)},handleInputConfirm(e){this.triggerEvent("linconfirm",e.detail)},getValues(){return this.data.value},reset(){this.data.value=""}}}); \ No newline at end of file diff --git a/examples/dist/checkbox-group/index.js b/examples/dist/checkbox-group/index.js index 22ca2bb4..a8b19a70 100644 --- a/examples/dist/checkbox-group/index.js +++ b/examples/dist/checkbox-group/index.js @@ -1,4 +1,4 @@ -import eventBus from '../utils/eventBus'; +import eventBus from '../core/utils/event-bus'; import rules from '../behaviors/rules'; diff --git a/examples/dist/collapse-item/index.js b/examples/dist/collapse-item/index.js index ff7b9c86..313d18b0 100644 --- a/examples/dist/collapse-item/index.js +++ b/examples/dist/collapse-item/index.js @@ -1,4 +1,4 @@ -import nodeUtil from '../utils/node-util'; +import nodeUtil from '../core/utils/node-util'; Component({ diff --git a/examples/dist/combined-tabs/index.js b/examples/dist/combined-tabs/index.js index a9c0d96c..908b448d 100644 --- a/examples/dist/combined-tabs/index.js +++ b/examples/dist/combined-tabs/index.js @@ -1,7 +1,7 @@ // components/tabs/index.js Component({ externalClasses: ['l-class-header', 'l-class-active', 'l-class-inactive', 'l-class-line', 'l-class-tabimage', - 'l-header-class', 'l-active-class', 'l-inactive-class', 'l-line-class', 'l-tabimage-class' + 'l-header-class', 'l-active-class', 'l-inactive-class', 'l-line-class', 'l-tabimage-class','l-content-class' ], relations: { '../tabpanel/index': { diff --git a/examples/dist/combined-tabs/index.wxml b/examples/dist/combined-tabs/index.wxml index d5a75cd1..f7873629 100644 --- a/examples/dist/combined-tabs/index.wxml +++ b/examples/dist/combined-tabs/index.wxml @@ -4,7 +4,7 @@ - + @@ -14,7 +14,7 @@ - + @@ -22,9 +22,9 @@ - - - + + + @@ -41,4 +41,4 @@ - \ No newline at end of file + diff --git a/src/utils/data-util.js b/examples/dist/core/utils/data-util.js similarity index 100% rename from src/utils/data-util.js rename to examples/dist/core/utils/data-util.js diff --git a/src/utils/eventBus.js b/examples/dist/core/utils/event-bus.js similarity index 100% rename from src/utils/eventBus.js rename to examples/dist/core/utils/event-bus.js diff --git a/src/utils/event-util.js b/examples/dist/core/utils/event-util.js similarity index 100% rename from src/utils/event-util.js rename to examples/dist/core/utils/event-util.js diff --git a/src/utils/node-util.js b/examples/dist/core/utils/node-util.js similarity index 78% rename from src/utils/node-util.js rename to examples/dist/core/utils/node-util.js index a90415c0..608aa64b 100644 --- a/src/utils/node-util.js +++ b/examples/dist/core/utils/node-util.js @@ -32,6 +32,17 @@ class NodeUtil { }).exec() }) } + + async getNodeFieldsFromComponent(component, selector, fields) { + return await new Promise((resolve) => { + component + .createSelectorQuery() + .select(selector) + .fields(fields, (res) => { + resolve(res) + }).exec() + }) + } } const nodeUtil = new NodeUtil() diff --git a/src/utils/pixel-util.js b/examples/dist/core/utils/pixel-util.js similarity index 100% rename from src/utils/pixel-util.js rename to examples/dist/core/utils/pixel-util.js diff --git a/examples/dist/form/index.js b/examples/dist/form/index.js index 2b9add22..3fecb2ab 100644 --- a/examples/dist/form/index.js +++ b/examples/dist/form/index.js @@ -1,4 +1,4 @@ -import eventBus from '../utils/eventBus.js'; +import eventBus from '../core/utils/event-bus.js'; Component({ /** * 组件的属性列表 diff --git a/examples/dist/index-anchor/index.js b/examples/dist/index-anchor/index.js index 467e0ead..99f2e67e 100644 --- a/examples/dist/index-anchor/index.js +++ b/examples/dist/index-anchor/index.js @@ -1,4 +1,4 @@ -import nodeUtil from '../utils/node-util' +import nodeUtil from '../core/utils/node-util' Component({ diff --git a/examples/dist/index-list/index.js b/examples/dist/index-list/index.js index 7d30c8cd..5153d51c 100644 --- a/examples/dist/index-list/index.js +++ b/examples/dist/index-list/index.js @@ -1,7 +1,7 @@ -import nodeUtil from '../utils/node-util' -import dataUtil from '../utils/data-util' -import eventUtil from '../utils/event-util' -import pixelUtil from '../utils/pixel-util' +import nodeUtil from '../core/utils/node-util' +import dataUtil from '../core/utils/data-util' +import eventUtil from '../core/utils/event-util' +import pixelUtil from '../core/utils/pixel-util' // 默认的 Sidebar 数据 const defaultSidebarData = [ @@ -28,7 +28,7 @@ Component({ }, lifetimes: { - async attached() { + attached() { this.init() } }, @@ -75,7 +75,9 @@ Component({ // 改变量用于标识是否正在滑动 Sidebar // 滑动侧栏的时候需要禁止页面滚动去改变 Sidebar 激活项 // 不然会出现 Sidebar 激活项乱跳动的问题 - isMoving: false + isMoving: false, + // sidebar-item 节点 rect 信息 + sidebarItemRect: {} }, // Anchor 节点信息 _anchor: { @@ -95,7 +97,9 @@ Component({ // Tip 提示绝对定位的top值 tipTop: 0, // 是否显示 Tip - showTip: false + showTip: false, + // tip 高度 + tipHeight: 0 }, observers: { @@ -122,7 +126,7 @@ Component({ // 解析 Sidebar Rect 信息 await this.parseSidebarRect() // 解析 SidebarItem Rect 信息 - this.parseSidebarItemRect() + await this.parseSidebarItemRect() // 获取 index-anchor 所有组件实例 await this.parseIndexAnchors() // 解析 Anchor Rect 信息 @@ -152,18 +156,39 @@ Component({ * 把 Sidebar 每个 Item 的中点位置存到 data 中 * 用于 Tip 定位使用 */ - parseSidebarItemRect() { + async parseSidebarItemRect() { // Sidebar 索引个数 const sidebarLength = this.data.sidebarData.length - // Sidebar 单个索引高度 + // 获取 sidebar-item 节点 + const sidebarItemRect = await nodeUtil.getNodeRectFromComponent(this, '.sidebar-item') + // Sidebar 单个索引高度(包含了 margin 空隙) const sidebarItemHeight = this.data._sidebar.height / sidebarLength - + // Sidebar 单个索引真实高度 + const sidebarItemRealHeight = sidebarItemRect.height + // 获取 sidebar-item margin-top 属性 + const sidebarItemFields = await nodeUtil.getNodeFieldsFromComponent(this, '.sidebar-item', { + computedStyle: ['margin-top'] + }) + // 获取 tip height 属性 + // 只能用 height 获取高度，因为 tip 旋转后，rect的宽高发生了变化 + const tipFields = await nodeUtil.getNodeFieldsFromComponent(this, '.tip', { + computedStyle: ['height'] + }) const sidebarItemCenterPoints = [] - for (let i = 0; i < sidebarLength; i++) { - sidebarItemCenterPoints.push(i * sidebarItemHeight) + const sidebarItemMarginTop = sidebarItemFields['margin-top'].replace('px', '') + + for (let i = 1; i <= sidebarLength; i++) { + sidebarItemCenterPoints.push((i * 2 - 1) * sidebarItemRealHeight / 2 + i * parseInt(sidebarItemMarginTop)) } + + const tipHeight = parseInt(tipFields.height.replace('px', '')) this.setData({ + tipHeight, + // tip 旋转后，中线位置下移了 20.5% + tipHeightOverflow: tipHeight * 0.205, + ['_sidebar.sidebarItemRect']: sidebarItemRect, ['_sidebar.sidebarItemHeight']: sidebarItemHeight, + ['_sidebar.sidebarItemRealHeight']: sidebarItemRealHeight, ['_sidebar.sidebarItemCenterPoints']: sidebarItemCenterPoints }) }, @@ -403,8 +428,16 @@ Component({ // 300 毫秒后隐藏 Tip setTimeout(() => { this.switchTipShow(false) - }, 300) + }, 500) this.switchIsMovingSidebar(false) + }, + + /** + * 监听 点击侧边栏 + */ + onTapSidebar(event) { + // 把事件对象传入触摸滑动监听函数即可 + this.onTouchMove(event) } } }) diff --git a/examples/dist/index-list/index.wxml b/examples/dist/index-list/index.wxml index 0c39e872..b67ef6f4 100644 --- a/examples/dist/index-list/index.wxml +++ b/examples/dist/index-list/index.wxml @@ -1,12 +1,12 @@ - + {{sidebarItem}} - + {{tipText}} diff --git a/examples/dist/index-list/index.wxss b/examples/dist/index-list/index.wxss index 7e39d16f..9b5ddd9a 100644 --- a/examples/dist/index-list/index.wxss +++ b/examples/dist/index-list/index.wxss @@ -1 +1 @@ -.index-list .sidebar{font-size:20rpx;position:fixed;right:20rpx;width:20rpx;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center}.index-list .sidebar-item{width:16px;height:16px;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-top:6rpx}.index-list .sidebar-item-active{color:#fff;background-color:#3963bc}.index-list .tip{width:90rpx;height:90rpx;background-color:#d8d8d8;border-radius:90px 90px 0;display:flex;justify-content:center;align-items:center;position:absolute;left:-160rpx;transform:rotate(-45deg) translateY(-35%)}.index-list .tip-text{font-size:30rpx;transform:rotate(45deg)} \ No newline at end of file +.index-list .sidebar{font-size:24rpx;position:fixed;right:30rpx;width:20rpx;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center}.index-list .sidebar-item{width:40rpx;height:40rpx;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-top:8rpx}.index-list .sidebar-item-active{color:#fff;background-color:#3963bc}.index-list .tip{width:90rpx;height:90rpx;background-color:#d8d8d8;border-radius:90px 90px 0;display:flex;justify-content:center;align-items:center;position:absolute;left:-160rpx;transform:rotate(-45deg) translateY(-35%)}.index-list .tip-text{font-size:30rpx;transform:rotate(45deg)} \ No newline at end of file diff --git a/examples/dist/input/index.js b/examples/dist/input/index.js index 877117ff..c263721c 100644 --- a/examples/dist/input/index.js +++ b/examples/dist/input/index.js @@ -1,5 +1,5 @@ // input/input.js -import eventBus from '../utils/eventBus.js'; +import eventBus from '../core/utils/event-bus.js'; import validator from '../behaviors/validator'; import rules from '../behaviors/rules'; Component({ diff --git a/examples/dist/input/index.wxml b/examples/dist/input/index.wxml index 989f4e5b..b5ec78a4 100644 --- a/examples/dist/input/index.wxml +++ b/examples/dist/input/index.wxml @@ -1,7 +1,7 @@ + + + + 码云 + https://gitee.com/talelin/lin-ui + + 贡献人员 @@ -38,6 +45,7 @@ 洪晨 句号 桔子 + 木荣 @@ -50,4 +58,4 @@ 关注林间有风公众号 点击图片可保存二维码识别 - \ No newline at end of file + diff --git a/examples/pages/about/index.wxss b/examples/pages/about/index.wxss index e93a1ca3..c8700b7b 100644 --- a/examples/pages/about/index.wxss +++ b/examples/pages/about/index.wxss @@ -139,7 +139,7 @@ page { font-size : 28rpx; font-family: PingFangSC-Regular; color : rgba(89, 108, 142, 1); - margin-left: 16rpx; + margin-left: 12rpx; } .version-container { @@ -156,4 +156,4 @@ page { width : 182rpx; height : 35rpx; margin-left: 20rpx; -} \ No newline at end of file +} diff --git a/examples/pages/components/layout/pages/album/index.js b/examples/pages/components/layout/pages/album/index.js index bd2f1c2f..377292af 100644 --- a/examples/pages/components/layout/pages/album/index.js +++ b/examples/pages/components/layout/pages/album/index.js @@ -5,20 +5,26 @@ Page({ * 页面的初始数据 */ data: { - urls1_1: ['http://img2.imgtn.bdimg.com/it/u=1944156091,814818697&fm=26&gp=0.jpg'], - urls1_2: ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575390421137&di=3ba6f1c3b893af11a8cf7a32455d011c&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fee327b05d345a246d773b4b73df51c408f11112615d8e-5luZ3f_fw658'], - urls5: ['http://img2.imgtn.bdimg.com/it/u=1944156091,814818697&fm=26&gp=0.jpg', 'http://pic1.win4000.com/wallpaper/2/596470aa0a9d3.jpg', 'http://pic1.win4000.com/wallpaper/2018-02-02/5a741b536cf04.jpg', 'http://image.naic.org.cn/uploadfile/2017/1011/1507715213116632.jpg', 'http://e0.ifengimg.com/10/2019/0421/9FB69F78D3D83925878EF2CFFEFA435E3F0F5DED_size144_w1080_h608.jpeg'], + urls1_1: ['https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-3.jpg?sign=d71bb290f896e14bb800d0fb807f6764&t=1590025427'], + urls5: [ + 'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-1.jpg?sign=ff17b6597c5659186d54469e6122d153&t=1590025404', + 'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-2.jpg?sign=7ccd10f793df154311f15a7b15d9ba57&t=1590025418', + 'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-3.jpg?sign=d71bb290f896e14bb800d0fb807f6764&t=1590025427', + 'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-4.jpg?sign=37d3fc32fe841a137e56b54cec2807c8&t=1590025434', + 'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-5.jpg?sign=785abbd12c4fa70454ef4bd7c3961536&t=1590025441' + ], urls4: [{ - newurl: 'http://img2.imgtn.bdimg.com/it/u=1944156091,814818697&fm=26&gp=0.jpg', + newurl: 'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-6.jpg?sign=6ba5b48f6766201a5458725defff47c7&t=1590025956', index: 0 }, { - newurl: 'http://pic1.win4000.com/wallpaper/2/596470aa0a9d3.jpg' + newurl: 'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-7.jpg?sign=a09608b13d13402e657a8a37118f3190&t=1590025970' }, { - newurl: 'http://img2.imgtn.bdimg.com/it/u=1944156091,814818697&fm=26&gp=0.jpg', + newurl: 'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-8.jpg?sign=a984d69b221dee6ce1da7f213c9593be&t=1590025977', index: 0 }, { - newurl: 'http://pic1.win4000.com/wallpaper/2/596470aa0a9d3.jpg' - }] + newurl: 'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-9.jpg?sign=d63aa68ca5c4e65598c781cac161981c&t=1590026002' + }], + avatarUrl:'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/avatar.jpg?sign=21809a2654e7a6fdd438166e83a35484&t=1590025376' }, /** @@ -76,4 +82,4 @@ Page({ onShareAppMessage: function () { } -}) \ No newline at end of file +}) diff --git a/examples/pages/components/layout/pages/album/index.wxml b/examples/pages/components/layout/pages/album/index.wxml index edc296a4..2274a3a3 100644 --- a/examples/pages/components/layout/pages/album/index.wxml +++ b/examples/pages/components/layout/pages/album/index.wxml @@ -4,9 +4,9 @@ - + - Lin-UI-27315 + LinUI@27315 @@ -15,9 +15,9 @@ - + - Lin-UI-27315 + LinUI@27315 @@ -26,18 +26,18 @@ - + - Lin-UI-27315 + LinUI@27315 - + - Lin-UI-27315 + LinUI@27315 @@ -46,9 +46,9 @@ - + - Lin-UI-27315 + LinUI@27315 @@ -57,13 +57,13 @@ - + - Lin-UI-27315 + LinUI@27315 - \ No newline at end of file + diff --git a/examples/pages/components/layout/pages/index-list/city-data.js b/examples/pages/components/layout/pages/index-list/city-data.js deleted file mode 100644 index c3885ffe..00000000 --- a/examples/pages/components/layout/pages/index-list/city-data.js +++ /dev/null @@ -1,123 +0,0 @@ -const cityData = { - "city":[ - { - "title":"A", - "lists":[ - "阿坝","阿拉善","阿里","安康","安庆","鞍山","安顺","安阳","澳门" - ] - }, - { - "title":"B", - "lists":["北京","白银","保定","宝鸡","保山","包头","巴中","北海","蚌埠","本溪","毕节","滨州","百色","亳州" - ] - }, - { - "title":"C", - "lists":["重庆","成都","长沙","长春","沧州","常德","昌都","长治","常州","巢湖","潮州","承德", "郴州","赤峰","池州","崇左","楚雄","滁州","朝阳" - ] - }, - { - "title":"D", - "lists":["大连","东莞","大理","丹东","大庆","大同","大兴安岭","德宏","德阳","德州","定西","迪庆","东营" - ] - }, - { - "title":"E", - "lists":["鄂尔多斯","恩施","鄂州"] - }, - { - "title":"F", - "lists":["福州","防城港","佛山","抚顺","抚州","阜新","阜阳" - ] - - }, - { - "title":"G", - "lists":["广州","桂林","贵阳","甘南","赣州","甘孜","广安","广元","贵港","果洛"] - - }, - { - "title":"H", - "lists":["杭州","哈尔滨","合肥","海口","呼和浩特","海北","海东","海南","海西","邯郸","汉中","鹤壁","河池","鹤岗","黑河","衡水","衡阳","河源","贺州","红河","淮安","淮北","怀化","淮南","黄冈","黄南","黄山","黄石","惠州","葫芦岛","呼伦贝尔","湖州","菏泽" - ] - }, - { - "title":"J", - "lists":["济南","佳木斯","吉安","江门","焦作","嘉兴","嘉峪关","揭阳","吉林","金昌","晋城","景德镇","荆门","荆州","金华","济宁","晋中","锦州","九江", - "酒泉" - ] - - }, - { - "title":"K", - "lists":["昆明","开封"] - - }, - { - "title":"L", - "lists":["兰州","拉萨","来宾","莱芜","廊坊","乐山","凉山","连云港","聊城","辽阳","辽源","丽江","临沧","临汾","临夏","临沂","林芝","丽水","六安","六盘水", - "柳州","陇南","龙岩","娄底","漯河","洛阳","泸州","吕梁" - ] - - }, - { - "title":"M", - "lists":["马鞍山","茂名","眉山","梅州","绵阳","牡丹江"] - - }, - { - "title":"N", - "lists":["南京","南昌","南宁","宁波","南充","南平","南通","南阳","那曲","内江", "宁德","怒江" - ] - }, - { - "title":"P", - "lists":["盘锦","攀枝花","平顶山","平凉","萍乡","莆田","濮阳"] - - }, - { - "title":"Q", - "lists":["青岛","黔东南","黔南","黔西南","庆阳","清远","秦皇岛","钦州","齐齐哈尔","泉州","曲靖","衢州"] - - }, - { - "title":"R", - "lists":["日喀则","日照"] - }, - { - "title":"S", - "lists":["上海","深圳","苏州","沈阳","石家庄","三门峡","三明","三亚","商洛","商丘","上饶","山南","汕头","汕尾","韶关","绍兴","邵阳","十堰","朔州","四平","绥化","遂宁","随州","宿迁","宿州" - ] - - }, - { - "title":"T", - "lists":["天津","太原","泰安","泰州","台州","唐山","天水","铁岭","铜川","通化","通辽","铜陵","铜仁","台湾" - ] - }, - { - "title":"W", - "lists":["武汉","乌鲁木齐","无锡","威海","潍坊","文山","温州","乌海","芜湖","乌兰察布","武威","梧州" - ] - }, - { - "title":"X", - "lists":["厦门","西安","西宁","襄樊","湘潭","湘西","咸宁","咸阳","孝感","邢台","新乡","信阳","新余","忻州","西双版纳","宣城","许昌","徐州","香港","锡林郭勒","兴安" - ] - - }, - { - "title":"Y", - "lists":["银川","雅安","延安","延边","盐城","阳江","阳泉","扬州","烟台","宜宾","宜昌","宜春","营口","益阳","永州","岳阳","榆林","运城","云浮","玉树","玉溪","玉林" - ] - - }, - { - "title":"Z", - "lists":["杂多县","赞皇县","枣强县","枣阳市","枣庄","泽库县","增城市","曾都区","泽普县","泽州县","札达县","扎赉特旗","扎兰屯市","扎鲁特旗","扎囊县","张北县","张店区","章贡区","张家港","张家界","张家口","漳平市","漳浦县","章丘市","樟树市","张湾区","彰武县","漳县","张掖","漳州","长子县","湛河区","湛江","站前区","沾益县","诏安县","召陵区","昭平县","肇庆","昭通","赵县","昭阳区","招远市","肇源县","肇州县","柞水县","柘城县","浙江","镇安县","振安区","镇巴县","正安县","正定县","正定新区","正蓝旗","正宁县","蒸湘区","正镶白旗","正阳县","郑州","镇海区","镇江","浈江区","镇康县","镇赉县","镇平县","振兴区","镇雄县","镇原县","志丹县","治多县","芝罘区","枝江市","芷江侗族自治县","织金县","中方县","中江县","钟楼区","中牟县","中宁县","中山","中山区","钟山区","钟山县","中卫","钟祥市","中阳县","中原区","周村区","周口","周宁县","舟曲县","舟山","周至县","庄河市","诸城市","珠海","珠晖区","诸暨市","驻马店","准格尔旗","涿鹿县","卓尼","涿州市","卓资县","珠山区","竹山县","竹溪县","株洲","株洲县","淄博","子长县","淄川区","自贡","秭归县","紫金县","自流井区","资溪县","资兴市","资阳" - ] - } - ] -} - -export default cityData diff --git a/examples/pages/components/layout/pages/index-list/index.js b/examples/pages/components/layout/pages/index-list/index.js index f1c7d75c..3f264b39 100644 --- a/examples/pages/components/layout/pages/index-list/index.js +++ b/examples/pages/components/layout/pages/index-list/index.js @@ -1,5 +1,3 @@ -import cityData from './city-data'; - const sideBarData = [ 'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z' ] @@ -7,9 +5,7 @@ const sideBarData = [ Page({ data: { scrollTop: 0, - cityData: cityData.city, - sideBarData: sideBarData, - showAreaChoose:true + sideBarData: sideBarData }, onPageScroll(options) { @@ -17,15 +13,5 @@ Page({ this.setData({ scrollTop }) - }, - - onChangeSegement(event){ - wx.pageScrollTo({ - duration: 0, - scrollTop: 0 - }) - this.setData({ - showAreaChoose:!event.detail.currentIndex - }) } }); diff --git a/examples/pages/components/layout/pages/index-list/index.json b/examples/pages/components/layout/pages/index-list/index.json index bacec876..3e56e272 100644 --- a/examples/pages/components/layout/pages/index-list/index.json +++ b/examples/pages/components/layout/pages/index-list/index.json @@ -3,6 +3,7 @@ "l-index-list": "/dist/index-list/index", "l-index-anchor": "/dist/index-anchor/index", "l-segment": "/dist/segment/index", - "l-segment-item": "/dist/segment-item/index" + "l-segment-item": "/dist/segment-item/index", + "content-title": "/components/content-title/index" } } diff --git a/examples/pages/components/layout/pages/index-list/index.wxml b/examples/pages/components/layout/pages/index-list/index.wxml index 43114bb1..c248c5cf 100644 --- a/examples/pages/components/layout/pages/index-list/index.wxml +++ b/examples/pages/components/layout/pages/index-list/index.wxml @@ -1,42 +1,16 @@ - - - - - - - - - - - - - - - - - {{item}} - - - - - - - - + + - + - + @@ -45,5 +19,5 @@ - + diff --git a/examples/pages/components/layout/pages/index-list/index.wxss b/examples/pages/components/layout/pages/index-list/index.wxss index be7bd849..7ca1ab2a 100644 --- a/examples/pages/components/layout/pages/index-list/index.wxss +++ b/examples/pages/components/layout/pages/index-list/index.wxss @@ -1,50 +1,3 @@ -.segment-wrapper{ - position: fixed; - top: 0; - left: 0; - right: 0; - height: 80rpx; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - background-color: white; - z-index: 999; -} - -l-segment{ - width: 100%; -} - -.title { - background-color: #494949; -} - -.city-item-wrapper { - width: 100%; - background-color: white; - display: flex; - align-items: center; - font-size: 26rpx; -} - -.city-item { - margin-left: 30rpx; - margin-right: 60rpx; - width: 100%; - height: 80rpx; - display: flex; - align-items: center; -} - -.city-item-wrapper:not(:last-of-type) > .city-item { - border-bottom: 1px solid #f1f1f1; -} - -.index-list-container{ - padding-top: 80rpx; -} - l-index-list{ transition: 0.3s; } diff --git a/package.json b/package.json index a9045142..96c2208f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lin-ui", - "version": "0.8.0", + "version": "0.8.1", "description": "A high quality UI components library with MiniProgram", "main": "app.js", "directories": { @@ -12,7 +12,8 @@ "watch": "gulp -f build/index.js watch", "lint": "eslint ./src/**/*.js", "test": "jest", - "release": "sh build/release.sh" + "release": "sh build/release.sh", + "changelog": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -s -n .convention-changelog-config.js" }, "repository": { "type": "git", diff --git a/src/checkbox-group/index.js b/src/checkbox-group/index.js index 22ca2bb4..a8b19a70 100644 --- a/src/checkbox-group/index.js +++ b/src/checkbox-group/index.js @@ -1,4 +1,4 @@ -import eventBus from '../utils/eventBus'; +import eventBus from '../core/utils/event-bus'; import rules from '../behaviors/rules'; diff --git a/src/collapse-item/index.js b/src/collapse-item/index.js index ff7b9c86..313d18b0 100644 --- a/src/collapse-item/index.js +++ b/src/collapse-item/index.js @@ -1,4 +1,4 @@ -import nodeUtil from '../utils/node-util'; +import nodeUtil from '../core/utils/node-util'; Component({ diff --git a/src/combined-tabs/index.js b/src/combined-tabs/index.js index a9c0d96c..908b448d 100644 --- a/src/combined-tabs/index.js +++ b/src/combined-tabs/index.js @@ -1,7 +1,7 @@ // components/tabs/index.js Component({ externalClasses: ['l-class-header', 'l-class-active', 'l-class-inactive', 'l-class-line', 'l-class-tabimage', - 'l-header-class', 'l-active-class', 'l-inactive-class', 'l-line-class', 'l-tabimage-class' + 'l-header-class', 'l-active-class', 'l-inactive-class', 'l-line-class', 'l-tabimage-class','l-content-class' ], relations: { '../tabpanel/index': { diff --git a/src/combined-tabs/index.wxml b/src/combined-tabs/index.wxml index d5a75cd1..f7873629 100644 --- a/src/combined-tabs/index.wxml +++ b/src/combined-tabs/index.wxml @@ -4,7 +4,7 @@ - + @@ -14,7 +14,7 @@ - + @@ -22,9 +22,9 @@ - - - + + + @@ -41,4 +41,4 @@ - \ No newline at end of file + diff --git a/src/core/utils/data-util.js b/src/core/utils/data-util.js new file mode 100644 index 00000000..853b7067 --- /dev/null +++ b/src/core/utils/data-util.js @@ -0,0 +1,25 @@ +class DataUtil { + /** + * 设置差异数据 + * @param component + * @param data + */ + setDiffData(component, data) { + const diffData = {} + + // 遍历获取到有差异的数据 + Object.keys(data).forEach(key => { + if (component.data[key] !== data[key]) { + diffData[key] = data[key] + } + }) + + // 设置数据 + if (Object.keys(diffData).length) { + component.setData(diffData) + } + } +} + +const dataUtil = new DataUtil +export default dataUtil diff --git a/src/core/utils/event-bus.js b/src/core/utils/event-bus.js new file mode 100644 index 00000000..53e483df --- /dev/null +++ b/src/core/utils/event-bus.js @@ -0,0 +1,78 @@ +//创建EventBus对象 +let EventBus = function () {}; +//准备数组容器 +var objBus = [], arrBus = []; +//添加方法 +EventBus.prototype = { + obj: { + set: function (key, action) { + if (key && action) { + var map = {}; + map.k = key; + map.v = action; + //如果存在，则删除之前添加的事件 + for (var i = 0, busLength = objBus.length; i < busLength; i++) { + var tempMap = objBus[i]; + if (tempMap.k === key) { + objBus.splice(i, 1); + } + } + objBus.push(map); + } + }, + get: function (key) { + if (key) { + for (var i = 0, busLength = objBus.length; i < busLength; i++) { + var map = objBus[i]; + if (map.k === key) { + return map.v(); + } + } + } + } + }, + emit: function (key, data) { + if (key) { + for (var i = 0, busLength = arrBus.length; i < busLength; i++) { + var map = arrBus[i]; + if (map.k === key) { + return map.v(data); + } + } + } + return new Promise((resolve) => { resolve();}); + }, + on: function (key, action) { + if (key && action) { + var map = {}; + map.k = key; + map.v = action; + arrBus.push(map); + } + }, + arr: { + push: function (key, action) { + if (key && action) { + var map = {}; + map.k = key; + map.v = action; + arrBus.push(map); + } + }, + pop: function (key) { + if (key) { + for (var i = 0, busLength = arrBus.length; i < busLength; i++) { + var map = arrBus[i]; + if (map.k === key) { + map.v(); + } + } + } + } + } +}; +var eventBus = new EventBus(); +export default eventBus; +// module.exports = { +// eventBus: eventBus +// } diff --git a/src/core/utils/event-util.js b/src/core/utils/event-util.js new file mode 100644 index 00000000..44caea7e --- /dev/null +++ b/src/core/utils/event-util.js @@ -0,0 +1,12 @@ +class EventUtil { + emit(component, eventName, detail) { + component.triggerEvent(eventName, detail, { + bubbles: true, + composed: true, + capturePhase: true + }) + } +} + +const eventUtil = new EventUtil() +export default eventUtil diff --git a/src/core/utils/node-util.js b/src/core/utils/node-util.js new file mode 100644 index 00000000..608aa64b --- /dev/null +++ b/src/core/utils/node-util.js @@ -0,0 +1,49 @@ +class NodeUtil { + /** + * 获取组件内部节点位置信息（单个） + * @param component 组件实例 + * @param selector {String} css选择器 + * @returns boundingClientRect() 回调函数的值 + */ + async getNodeRectFromComponent(component, selector) { + return await new Promise((resolve) => { + component + .createSelectorQuery() + .select(selector) + .boundingClientRect((res) => { + resolve(res) + }).exec() + }) + } + + /** + * 获取组件内部节点位置信息（多个） + * @param component 组件实例 + * @param selector {String} css选择器 + * @returns boundingClientRect() 回调函数的值 + */ + async getNodesRectFromComponent(component, selector) { + return await new Promise((resolve) => { + component + .createSelectorQuery() + .selectAll(selector) + .boundingClientRect((res) => { + resolve(res) + }).exec() + }) + } + + async getNodeFieldsFromComponent(component, selector, fields) { + return await new Promise((resolve) => { + component + .createSelectorQuery() + .select(selector) + .fields(fields, (res) => { + resolve(res) + }).exec() + }) + } +} + +const nodeUtil = new NodeUtil() +export default nodeUtil diff --git a/src/core/utils/pixel-util.js b/src/core/utils/pixel-util.js new file mode 100644 index 00000000..51b55ceb --- /dev/null +++ b/src/core/utils/pixel-util.js @@ -0,0 +1,33 @@ +/** + * 像素工具 + */ +class PixelUtil { + /** + * 构造函数 + * @param systemInfo 设备信息 + */ + constructor(systemInfo) { + this.systemInfo = systemInfo + } + + /** + * px 转 rpx + * @param pxNumber px数值 + * @returns {number} rpx数值 + */ + px2rpx(pxNumber) { + return (750 / this.systemInfo.screenWidth) * pxNumber + } + + /** + * rpx 转 px + * @param rpxNumber rpx数值 + * @returns {number} px数值 + */ + rpx2px(rpxNumber){ + return (rpxNumber / 750) * this.systemInfo.screenWidth + } +} + +const pixelUtil = new PixelUtil(wx.getSystemInfoSync()) +export default pixelUtil diff --git a/src/form/index.js b/src/form/index.js index 2b9add22..3fecb2ab 100644 --- a/src/form/index.js +++ b/src/form/index.js @@ -1,4 +1,4 @@ -import eventBus from '../utils/eventBus.js'; +import eventBus from '../core/utils/event-bus.js'; Component({ /** * 组件的属性列表 diff --git a/src/index-anchor/index.js b/src/index-anchor/index.js index 467e0ead..99f2e67e 100644 --- a/src/index-anchor/index.js +++ b/src/index-anchor/index.js @@ -1,4 +1,4 @@ -import nodeUtil from '../utils/node-util' +import nodeUtil from '../core/utils/node-util' Component({ diff --git a/src/index-list/index.js b/src/index-list/index.js index 7d30c8cd..5153d51c 100644 --- a/src/index-list/index.js +++ b/src/index-list/index.js @@ -1,7 +1,7 @@ -import nodeUtil from '../utils/node-util' -import dataUtil from '../utils/data-util' -import eventUtil from '../utils/event-util' -import pixelUtil from '../utils/pixel-util' +import nodeUtil from '../core/utils/node-util' +import dataUtil from '../core/utils/data-util' +import eventUtil from '../core/utils/event-util' +import pixelUtil from '../core/utils/pixel-util' // 默认的 Sidebar 数据 const defaultSidebarData = [ @@ -28,7 +28,7 @@ Component({ }, lifetimes: { - async attached() { + attached() { this.init() } }, @@ -75,7 +75,9 @@ Component({ // 改变量用于标识是否正在滑动 Sidebar // 滑动侧栏的时候需要禁止页面滚动去改变 Sidebar 激活项 // 不然会出现 Sidebar 激活项乱跳动的问题 - isMoving: false + isMoving: false, + // sidebar-item 节点 rect 信息 + sidebarItemRect: {} }, // Anchor 节点信息 _anchor: { @@ -95,7 +97,9 @@ Component({ // Tip 提示绝对定位的top值 tipTop: 0, // 是否显示 Tip - showTip: false + showTip: false, + // tip 高度 + tipHeight: 0 }, observers: { @@ -122,7 +126,7 @@ Component({ // 解析 Sidebar Rect 信息 await this.parseSidebarRect() // 解析 SidebarItem Rect 信息 - this.parseSidebarItemRect() + await this.parseSidebarItemRect() // 获取 index-anchor 所有组件实例 await this.parseIndexAnchors() // 解析 Anchor Rect 信息 @@ -152,18 +156,39 @@ Component({ * 把 Sidebar 每个 Item 的中点位置存到 data 中 * 用于 Tip 定位使用 */ - parseSidebarItemRect() { + async parseSidebarItemRect() { // Sidebar 索引个数 const sidebarLength = this.data.sidebarData.length - // Sidebar 单个索引高度 + // 获取 sidebar-item 节点 + const sidebarItemRect = await nodeUtil.getNodeRectFromComponent(this, '.sidebar-item') + // Sidebar 单个索引高度(包含了 margin 空隙) const sidebarItemHeight = this.data._sidebar.height / sidebarLength - + // Sidebar 单个索引真实高度 + const sidebarItemRealHeight = sidebarItemRect.height + // 获取 sidebar-item margin-top 属性 + const sidebarItemFields = await nodeUtil.getNodeFieldsFromComponent(this, '.sidebar-item', { + computedStyle: ['margin-top'] + }) + // 获取 tip height 属性 + // 只能用 height 获取高度，因为 tip 旋转后，rect的宽高发生了变化 + const tipFields = await nodeUtil.getNodeFieldsFromComponent(this, '.tip', { + computedStyle: ['height'] + }) const sidebarItemCenterPoints = [] - for (let i = 0; i < sidebarLength; i++) { - sidebarItemCenterPoints.push(i * sidebarItemHeight) + const sidebarItemMarginTop = sidebarItemFields['margin-top'].replace('px', '') + + for (let i = 1; i <= sidebarLength; i++) { + sidebarItemCenterPoints.push((i * 2 - 1) * sidebarItemRealHeight / 2 + i * parseInt(sidebarItemMarginTop)) } + + const tipHeight = parseInt(tipFields.height.replace('px', '')) this.setData({ + tipHeight, + // tip 旋转后，中线位置下移了 20.5% + tipHeightOverflow: tipHeight * 0.205, + ['_sidebar.sidebarItemRect']: sidebarItemRect, ['_sidebar.sidebarItemHeight']: sidebarItemHeight, + ['_sidebar.sidebarItemRealHeight']: sidebarItemRealHeight, ['_sidebar.sidebarItemCenterPoints']: sidebarItemCenterPoints }) }, @@ -403,8 +428,16 @@ Component({ // 300 毫秒后隐藏 Tip setTimeout(() => { this.switchTipShow(false) - }, 300) + }, 500) this.switchIsMovingSidebar(false) + }, + + /** + * 监听 点击侧边栏 + */ + onTapSidebar(event) { + // 把事件对象传入触摸滑动监听函数即可 + this.onTouchMove(event) } } }) diff --git a/src/index-list/index.less b/src/index-list/index.less index 2c57d328..3dd68028 100644 --- a/src/index-list/index.less +++ b/src/index-list/index.less @@ -3,9 +3,9 @@ .index-list { //侧栏样式 .sidebar { - font-size: 20rpx; + font-size: 24rpx; position: fixed; - right: 20rpx; + right: 30rpx; width: 20rpx; top: 50%; transform: translateY(-50%); @@ -14,13 +14,13 @@ align-items: center; &-item { - width: 16px; - height: 16px; + width: 40rpx; + height: 40rpx; border-radius: 50%; display: flex; justify-content: center; align-items: center; - margin-top: 6rpx; + margin-top: 8rpx; } &-item-active { diff --git a/src/index-list/index.wxml b/src/index-list/index.wxml index 0c39e872..b67ef6f4 100644 --- a/src/index-list/index.wxml +++ b/src/index-list/index.wxml @@ -1,12 +1,12 @@ - + {{sidebarItem}} - + {{tipText}} diff --git a/src/input/index.js b/src/input/index.js index 877117ff..c263721c 100644 --- a/src/input/index.js +++ b/src/input/index.js @@ -1,5 +1,5 @@ // input/input.js -import eventBus from '../utils/eventBus.js'; +import eventBus from '../core/utils/event-bus.js'; import validator from '../behaviors/validator'; import rules from '../behaviors/rules'; Component({ diff --git a/src/input/index.wxml b/src/input/index.wxml index 989f4e5b..b5ec78a4 100644 --- a/src/input/index.wxml +++ b/src/input/index.wxml @@ -1,7 +1,7 @@