123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204 |
- var nvMask, nvImageMenu;
- class NvImageMenu {
- constructor(arg) {
- this.isShow = false
- }
- show({
- list,
- cancelText
- }, callback) {
- if (!list) {
- list = [{
- "img": "/static/sharemenu/wechatfriend.png",
- "text": "图标文字"
- }]
- }
- //以下为计算菜单的nview绘制布局,为固定算法,使用者无关关心
- var screenWidth = plus.screen.resolutionWidth
- //以360px宽度屏幕为例,上下左右边距及2排按钮边距留25像素,图标宽度55像素,同行图标间的间距在360宽的屏幕是30px,但需要动态计算,以此原则计算4列图标分别的left位置
- //图标下的按钮文字距离图标5像素,文字大小12像素
- //底部取消按钮高度固定为44px
- //TODO 未处理横屏和pad,这些情况6个图标应该一排即可
- var margin = 20,
- iconWidth = 60,
- icontextSpace = 5,
- textHeight = 12
- var left1 = margin / 360 * screenWidth
- var iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距,再减去4个图标的宽度,就是3个同行图标的间距
- if (iconSpace <= 5) { //屏幕过窄时,缩小边距和图标大小,再算一次
- margin = 15
- iconWidth = 40
- left1 = margin / 360 * screenWidth
- iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距,再减去4个图标的宽度,就是3个同行图标的间距
- }
- var left2 = left1 + iconWidth + iconSpace
- var left3 = left1 + (iconWidth + iconSpace) * 2
- var left4 = left1 + (iconWidth + iconSpace) * 3
- var top1 = left1
- var top2 = top1 + iconWidth + icontextSpace + textHeight + left1
- const TOP = {
- top1,
- top2
- },
- LEFT = {
- left1,
- left2,
- left3,
- left4
- };
- nvMask = new plus.nativeObj.View("nvMask", { //先创建遮罩层
- top: '0px',
- left: '0px',
- height: '100%',
- width: '100%',
- backgroundColor: 'rgba(0,0,0,0.2)'
- });
- nvImageMenu = new plus.nativeObj.View("nvImageMenu", { //创建底部图标菜单
- bottom: '0px',
- left: '0px',
- height: (iconWidth + textHeight + 2 * margin) * Math.ceil(list.length / 4) + 44 +
- 'px', //'264px',
- width: '100%',
- backgroundColor: 'rgb(255,255,255)'
- });
- nvMask.addEventListener("click", () => { //处理遮罩层点击
- // console.log('处理遮罩层点击');
- this.hide()
- callback({
- event: "clickMask"
- })
- })
- let myList = []
- list.forEach((item, i) => {
- myList.push({
- tag: 'img',
- src: item.img,
- position: {
- top: TOP['top' + (parseInt(i / 4) + 1)],
- left: LEFT['left' + (1 + i % 4)],
- width: iconWidth,
- height: iconWidth
- }
- })
- myList.push({
- tag: 'font',
- text: item.text,
- textStyles: {
- size: textHeight
- },
- position: {
- top: TOP['top' + (parseInt(i / 4) + 1)] + iconWidth + icontextSpace,
- left: LEFT['left' + (1 + i % 4)],
- width: iconWidth,
- height: textHeight
- }
- })
- })
- //绘制底部图标菜单的内容
- nvImageMenu.draw([{
- tag: 'rect', //菜单顶部的分割灰线
- color: '#e7e7e7',
- position: {
- top: '0px',
- height: '1px'
- }
- },
- {
- tag: 'font',
- text: cancelText, //底部取消按钮的文字
- textStyles: {
- size: '14px'
- },
- position: {
- bottom: '0px',
- height: '44px'
- }
- },
- {
- tag: 'rect', //底部取消按钮的顶部边线
- color: '#e7e7e7',
- position: {
- bottom: '45px',
- height: '1px'
- }
- },
- ...myList
- ])
- nvMask.show()
- nvImageMenu.show()
- // 开始动画
- /*
- plus.nativeObj.View.startAnimation({
- type: 'slide-in-bottom',
- duration: 300
- }, nvImageMenu, {}, function() {
- console.log('plus.nativeObj.View.startAnimation动画结束');
- // 关闭原生动画
- plus.nativeObj.View.clearAnimation();
- nvImageMenu.show()
- });
- */
- this.isShow = true
- nvImageMenu.addEventListener("click", e => { //处理底部图标菜单的点击事件,根据点击位置触发不同的逻辑
- // console.log("click menu"+JSON.stringify(e));
- if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮
- // callback({event:"clickCancelButton"})
- this.hide()
- } else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {
- //屏幕左右边缘5像素及菜单顶部5像素不处理点击
- } else { //点击了图标按钮
- var iClickIndex = -1 //点击的图标按钮序号,第一个图标按钮的index为0
- var iRow = e.clientY < (top2 - (left1 / 2)) ? 0 : 1
- var iCol = -1
- if (e.clientX < (left2 - (iconSpace / 2))) {
- iCol = 0
- } else if (e.clientX < (left3 - (iconSpace / 2))) {
- iCol = 1
- } else if (e.clientX < (left4 - (iconSpace / 2))) {
- iCol = 2
- } else {
- iCol = 3
- }
- if (iRow == 0) {
- iClickIndex = iCol
- } else {
- iClickIndex = iCol + 4
- }
- // console.log("点击按钮的序号: " + iClickIndex);
- // if (iClickIndex >= 0 && iClickIndex <= 5) { //处理具体的点击逻辑,此处也可以自行定义逻辑。如果增减了按钮,此处也需要跟着修改
- // }
- callback({
- event: "clickMenu",
- index: iClickIndex
- })
- }
- })
- /* nvImageMenu.addEventListener("touchstart", function(e) {
- if (e.screenY > (plus.screen.resolutionHeight - 44)) {
- //TODO 这里可以处理按下背景变灰的效果
- }
- })
- nvImageMenu.addEventListener("touchmove", function(e) {
- //TODO 这里可以处理按下背景变灰的效果
- if (e.screenY > plus.screen.resolutionHeight - 44) {}
- })
- nvImageMenu.addEventListener("touchend", function(e) {
- //TODO 这里可以处理释放背景恢复的效果
- })
- */
- }
- hide() {
- if (this.isShow) {
- nvMask.hide()
- nvImageMenu.hide()
- this.isShow = false
- }
- }
- }
- export default NvImageMenu
|