文章 - DCloud问答

分享一个有初始化值的prompt

plus uniapp Native.JS prompt

showPrompt(){
let main = plus.android.runtimeMainActivity();
let EditText = plus.android.importClass('android.widget.EditText');
let et = new EditText(main);
et.setText(val);//设置初始值
var AlertDialog = plus.android.importClass("android.app.AlertDialog");// 导入AlertDialog类
var dlg = new AlertDialog.Builder(main);
dlg.setTitle("请输入");// 设置提示框标题
dlg.setView(et);
var listener = plus.android.implements('android.content.DialogInterface$OnClickListener',{
onClick:function(dialog,which){
self.Val = et.getText().toString();
}
})
dlg.setPositiveButton("确定",listener);// 设置提示框按钮以及监听器
dlg.setNegativeButton("取消",null);
dlg.show();// 显示提示框
uni.hideLoading();
}

继续阅读 »

MUI：项目笔记（一）

—— 本套前端采用MUI原生APP框架。
—— 整理页面：
_____
—— lib js,css,font,img文件存放
—— app.css 这是自定义CSS
—— app.js 这是自定义JS
—— game 所有单个彩种投注页面文件
—— prizes 所有单个彩种开奖页面文件
—— activity 最新优惠活动页面文件
—— betting 投注记录页面和投注详情页面文件
—— login 登录、注册、忘记密码页面文件
—— pay 充值、提款、转账页面文件
—— prizes 所有单个彩种开奖页面文件
—— user 用户修改信息页面文件
—— public 所有公共页面文件

	—— 脚部固定菜单 --> footernav.html

	—— 侧边滑动菜单（预留，没用到，有小BUG） --> nav.html --> 放在</header>之后就能用

	—— game.html 购彩大厅页面 --> 点击单个彩种跳转此彩种的投注页面
—— prize.html 开奖大厅页面 --> 点击单个彩种跳转此彩种的开奖历史 --> prizes文件夹
—— touzhu.html 投注记录页面 --> 点击单个记录跳转此彩种的详细投注信息 --> touzhus.html
—— touzhus.html 详情的投注记录页面
—— record.html 充值记录页面
—— records.html 充值记录详情页面
—— index.html 首页
—— user.html 个人中心页面

	—— 修改信息跳转页面 --> user.html

	—— 安全中心跳转页面 --> safe.html

	—— 消息中心跳转页面 --> message.html

	—— 代理中心跳转页面 --> agency.html

	—— APP下载跳转页面 --> 外链

	—— 充值跳转页面 --> recharge.html

	—— 提款跳转页面 --> drawing.html

	—— 转账跳转页面 --> giro.html

—— looks.html 用户协议页面
—— login.html 用户登录页面
—— register.html 用户注册页面
—— forgetpwd.html 忘记密码第一步页面
—— forgetpwd2.html 忘记密码第二步页面
——
——
——

MUI官网实例：http://www.dcloud.io/hellomui/

初始化模板：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xx</title>
<link rel="icon" type="image/x-icon" href="lib/img/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="lib/css/mui.min.css">
<link rel="stylesheet" type="text/css" href="lib/css/app.css" />
<script src="lib/js/mui.min.js "></script>
<script src="lib/js/jq.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="mui-off-canvas-wrap mui-draggable">

<div class="mui-inner-wrap">

<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">xx</h1>
</header>

<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">

</div>
</div>
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
</body>
<script type="text/javascript">
mui.init();
//内容允许滚动
(function($) {
$(".mui-scroll-wrapper").scroll({
bounce: true, //滚动条是否有弹力默认是true
indicators: true, //是否显示滚动条,默认是true
});
})(mui);
</script>

<script type="text/javascript">
$("body").on('tap', 'a', function(event) {
this.click();
});
</script>
</html>

页面滑动不了解决方案：

onclick和a标签跳转/点击事件用不了解决方案：onclick就是tap！！onclick被MUI封装成tap！！

<script type="text/javascript">
$("你的id/class").on('tap', 'a', function(event) {
this.click();
});
</script>
<script type="text/javascript">
mui('你的id/class').on('a',function(){
window.top.location.href=this.href;
});
</script>

返回上一层：

选项卡：

<div class="mui-content">
<div style="padding: 10px 10px;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1">普通下注</a>
<a class="mui-control-item" href="#item2">快捷下注</a>
</div>
</div>
<div>
<div id="item1" class="mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第1个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-3
</li>
</ul>
</div>
<div id="item2" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第二个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第二个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第二个选项卡子项-3
</li>
</ul>
</div>
</div>
</div>
<script>
(function($) {
$('#scroll').scroll({
indicators: true //是否显示滚动条
});
var segmentedControl = document.getElementById('segmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
var styleEl = document.querySelector('input[name="style"]:checked');
var colorEl = document.querySelector('input[name="color"]:checked');
if (styleEl && colorEl) {
var style = styleEl.value;
var color = colorEl.value;
segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-' + style) : '') + ' mui-segmented-' + color;
}
}
});
})(mui);
</script>

确定取消提示框：

<button id="tzbtn" type="button">提示框</button>
<script type="text/javascript">
document.getElementById("tzbtn").addEventListener('tap', function(e) {
e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
var btnArray = ['确定', '取消'];
// mui.alert('当前值: ' + document.getElementById("zj").value, null, "提示");
mui.prompt('当前值：', ' '+document.getElementById("zj").value, 'Hello MUI', )
});
</script>

验证弹窗：

继续阅读 »

—— 本套前端采用MUI原生APP框架。
—— 整理页面：
_____
—— lib js,css,font,img文件存放
—— app.css 这是自定义CSS
—— app.js 这是自定义JS
—— game 所有单个彩种投注页面文件
—— prizes 所有单个彩种开奖页面文件
—— activity 最新优惠活动页面文件
—— betting 投注记录页面和投注详情页面文件
—— login 登录、注册、忘记密码页面文件
—— pay 充值、提款、转账页面文件
—— prizes 所有单个彩种开奖页面文件
—— user 用户修改信息页面文件
—— public 所有公共页面文件

	—— 脚部固定菜单 --> footernav.html

	—— 侧边滑动菜单（预留，没用到，有小BUG） --> nav.html --> 放在</header>之后就能用

	—— game.html 购彩大厅页面 --> 点击单个彩种跳转此彩种的投注页面
—— prize.html 开奖大厅页面 --> 点击单个彩种跳转此彩种的开奖历史 --> prizes文件夹
—— touzhu.html 投注记录页面 --> 点击单个记录跳转此彩种的详细投注信息 --> touzhus.html
—— touzhus.html 详情的投注记录页面
—— record.html 充值记录页面
—— records.html 充值记录详情页面
—— index.html 首页
—— user.html 个人中心页面

	—— 修改信息跳转页面 --> user.html

	—— 安全中心跳转页面 --> safe.html

	—— 消息中心跳转页面 --> message.html

	—— 代理中心跳转页面 --> agency.html

	—— APP下载跳转页面 --> 外链

	—— 充值跳转页面 --> recharge.html

	—— 提款跳转页面 --> drawing.html

	—— 转账跳转页面 --> giro.html

—— looks.html 用户协议页面
—— login.html 用户登录页面
—— register.html 用户注册页面
—— forgetpwd.html 忘记密码第一步页面
—— forgetpwd2.html 忘记密码第二步页面
——
——
——

MUI官网实例：http://www.dcloud.io/hellomui/

初始化模板：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xx</title>
<link rel="icon" type="image/x-icon" href="lib/img/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="lib/css/mui.min.css">
<link rel="stylesheet" type="text/css" href="lib/css/app.css" />
<script src="lib/js/mui.min.js "></script>
<script src="lib/js/jq.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="mui-off-canvas-wrap mui-draggable">

<div class="mui-inner-wrap">

<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">xx</h1>
</header>

<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">

</div>
</div>
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
</body>
<script type="text/javascript">
mui.init();
//内容允许滚动
(function($) {
$(".mui-scroll-wrapper").scroll({
bounce: true, //滚动条是否有弹力默认是true
indicators: true, //是否显示滚动条,默认是true
});
})(mui);
</script>

<script type="text/javascript">
$("body").on('tap', 'a', function(event) {
this.click();
});
</script>
</html>

页面滑动不了解决方案：

onclick和a标签跳转/点击事件用不了解决方案：onclick就是tap！！onclick被MUI封装成tap！！

<script type="text/javascript">
$("你的id/class").on('tap', 'a', function(event) {
this.click();
});
</script>
<script type="text/javascript">
mui('你的id/class').on('a',function(){
window.top.location.href=this.href;
});
</script>

返回上一层：

选项卡：

<div class="mui-content">
<div style="padding: 10px 10px;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1">普通下注</a>
<a class="mui-control-item" href="#item2">快捷下注</a>
</div>
</div>
<div>
<div id="item1" class="mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第1个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-3
</li>
</ul>
</div>
<div id="item2" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第二个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第二个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第二个选项卡子项-3
</li>
</ul>
</div>
</div>
</div>
<script>
(function($) {
$('#scroll').scroll({
indicators: true //是否显示滚动条
});
var segmentedControl = document.getElementById('segmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
var styleEl = document.querySelector('input[name="style"]:checked');
var colorEl = document.querySelector('input[name="color"]:checked');
if (styleEl && colorEl) {
var style = styleEl.value;
var color = colorEl.value;
segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-' + style) : '') + ' mui-segmented-' + color;
}
}
});
})(mui);
</script>

确定取消提示框：

<button id="tzbtn" type="button">提示框</button>
<script type="text/javascript">
document.getElementById("tzbtn").addEventListener('tap', function(e) {
e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
var btnArray = ['确定', '取消'];
// mui.alert('当前值: ' + document.getElementById("zj").value, null, "提示");
mui.prompt('当前值：', ' '+document.getElementById("zj").value, 'Hello MUI', )
});
</script>

验证弹窗：

收起阅读 »

如何打开和关闭tabBar

tabbar

uni-app的tabBar配置在pages.json中。
那么怎样才可以在login.vue中关闭tabBar？登陆成功后再显示tabBar。

或者有其它什么好的解决办法？

mac的HBuilder真机调试无法出现设备（我的一个特例）

真机调试

可能是我mac的原因，之前没用全局的，是失败的。

我先用全局adb
adb kill-server
再用HBuilder底下的adb来启用和查看。
./adb start-server
./adb devices

再重启用HBuilder，便有了。

附：
HBuilder的adb目录位置：tools/adbs目录（MAC下为HBuilder.app/Contents/tools/adbs目录）
HBuilderX的adb目录位置：plugins/launcher/tools/adbs目录（MAC下为HBuilder.app/Contents/HBuilderX/plugins/launcher/tools/adbs目录）
在adbs目录下运行./adb kill-server重试。

继续阅读 »

新版HX很卡，经常卡死

HBuilderX

HX 1.2.1不知道为什么卡得的很严重。

1、启动很久，有时候要两分钟以上，而且启动卡住的时候电脑都动不了；
2、中文状态下输入英文的时候卡，要好几秒才识别出来；
3、选择文件的时候卡，这个就相当严重了，比如打包的时候选择证书文件，点击浏览，就开始卡死了，不是编辑器卡死而已，连电脑都卡死了，大概半个小时候后电脑可以动了，也就写了这个帖子，但是编辑器还是无法操作。

mac更新最新系统以后确实很卡，但不至于这么严重，而次打包都因为无法选择证书而不能打包，使用过程中经常就让你休息几分钟，不知道什么问题。

继续阅读 »

uni-app 利用uni-nav-bar组件设置导航栏透明渐变样式

uniapp uniapp 教程

官方的演示文件里有个uni-nav-bar,在需要的时候可以很好的自定义导航栏！

<template>  
    <view class="uni-navbar" :class="{'uni-navbar-fixed':isFixed,'uni-navbar-shadow':hasShadow}" :style="{'background-color':backgroundColor}">  
        <uni-status-bar v-if="insertStatusBar"></uni-status-bar>  
        <view class="uni-navbar-header" :style="{color:color}">  
            <view class="uni-navbar-header-btns" @tap="onClickLeft">  
                <view v-if="leftIcon.length">  
                    <uni-icon :type="leftIcon" :color="color" size="24"></uni-icon>  
                </view>  
                <view v-if="leftText.length" class="uni-navbar-btn-text" :class="{'uni-navbar-btn-icon-left':!leftIcon.length}">{{leftText}}</view>  
                <slot name="left"></slot>  
            </view>  
            <view class="uni-navbar-container">  
                <view v-if="title.length" class="uni-navbar-container-title">{{title}}</view>  
                <!-- 标题插槽 -->  
                <slot></slot>  
            </view>  
            <view class="uni-navbar-header-btns" @tap="onClickRight">  
                <view v-if="rightIcon.length">  
                    <uni-icon :type="rightIcon" :color="color" size="24"></uni-icon>  
                </view>  
                <!-- 优先显示图标 -->  
                <view v-if="rightText.length&&!rightIcon.length" class="uni-navbar-btn-text">{{rightText}}</view>  
                <slot name="right"></slot>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    import uniStatusBar from './uni-status-bar.vue'  
    import uniIcon from './uni-icon.vue'  

    export default {  
        components: {  
            uniStatusBar,  
            uniIcon  
        },  
        props: {  
            /**  
             * 标题文字  
             */  
            title: {  
                type: String,  
                default: ''  
            },  
            /**  
             * 左侧按钮文本  
             */  
            leftText: {  
                type: String,  
                default: ''  
            },  
            /**  
             * 右侧按钮文本  
             */  
            rightText: {  
                type: String,  
                default: ''  
            },  
            /**  
             * 左侧按钮图标  
             */  
            leftIcon: {  
                type: String,  
                default: ''  
            },  
            /**  
             * 右侧按钮图标  
             */  
            rightIcon: {  
                type: String,  
                default: ''  
            },  
            /**  
             * 是否固定在顶部  
             */  
            fixed: {  
                type: [Boolean, String],  
                default: false  
            },  
            /**  
             * 按钮图标和文字颜色  
             */  
            color: {  
                type: String,  
                default: '#000000'  
            },  
            /**  
             * 背景颜色  
             */  
            backgroundColor: {  
                type: String,  
                default: '#FFFFFF'  
            },  
            /**  
             * 是否包含状态栏，默认固定在顶部时包含  
             */  
            statusBar: {  
                type: [Boolean, String],  
                default: ''  
            },  
            /**  
             * 是否使用阴影，默认根据背景色判断  
             */  
            shadow: {  
                type: String,  
                default: ''  
            }  
        },  
        computed: {  
            isFixed() {  
                return String(this.fixed) === 'true'  
            },  
            insertStatusBar() {  
                switch (String(this.statusBar)) {  
                    case 'true':  
                        return true  
                    case 'false':  
                        return false  
                    default:  
                        return this.isFixed  
                }  
            },  
            hasShadow() {  
                var backgroundColor = this.backgroundColor  
                switch (String(this.shadow)) {  
                    case 'true':  
                        return true  
                    case 'false':  
                        return false  
                    default:  
                        return backgroundColor !== 'transparent' && backgroundColor.indexOf('rgba') < 0  
                }  
            }  
        },  
        methods: {  
            /**  
             * 左侧按钮点击事件  
             */  
            onClickLeft() {  
                this.$emit('clickLeft')  
                this.$emit('click-left')  
            },  
            /**  
             * 右侧按钮点击事件  
             */  
            onClickRight() {  
                this.$emit('clickRight')  
                this.$emit('click-right')  
            }  
        }  
    }  
</script>  

<style>  
    .uni-navbar {  
        display: block;  
        position: relative;  
        width: 100%;  
        background-color: #FFFFFF;  
        overflow: hidden;  
    }  

    .uni-navbar view{  
        line-height:44px;  
    }  

    .uni-navbar-shadow {  
        box-shadow: 0 1px 6px #ccc;  
    }  

    .uni-navbar.uni-navbar-fixed {  
        position: fixed;  
        z-index: 998;  
    }  

    .uni-navbar-header {  
        display: flex;  
        flex-direction: row;  
        width: 100%;  
        height:44px;  
        line-height:44px;  
        font-size: 16px;  
    }  

    .uni-navbar-header .uni-navbar-header-btns{  
        display:inline-flex;  
        flex-wrap:nowrap;  
        flex-shrink:0;  
        width: 120upx;  
        padding:0 12upx;  
    }  

    .uni-navbar-header .uni-navbar-header-btns:first-child{  
        padding-left:0;  
    }  
    .uni-navbar-header .uni-navbar-header-btns:last-child{  
        width: 60upx;  
    }  
    .uni-navbar-container{  
        width:100%;  
        margin:0 10upx;  
    }  
    .uni-navbar-container-title{  
        font-size:30upx;  
        text-align:center;  
        padding-right: 60upx;  
    }  
</style>

我们只需要在页面引用这个组件就可以实现导航栏的自定义了！具体的我就不描述了！
在模板文件中引入

        <uni-nav-bar fixed="true" :background-color="titleBg"  left-icon="back" @click-left="back" @click-right="showMenu" left-text="返回" right-text="菜单"  
         title="导航栏组件"></uni-nav-bar>

给导航栏背景定义一个titleBg

<script>  
    import uniNavBar from '../../../components/uni-nav-bar.vue'  
    export default {  
        data() {  
            return {  
                titleBg:'rgba(255,255,255,0)'  
            };  
        },  
        components: {  
            uniNavBar  
        },  
        methods: {  

        },  
        onPageScroll:function(e){  
            this.titleBg = 'rgba(255,255,255,'+e.scrollTop / 300+')';  
        }  
    }  
</script>

这样就完成了从透明到白色背景的滚动渐变样式了其他颜色修改下就可以了

继续阅读 »

官方的演示文件里有个uni-nav-bar,在需要的时候可以很好的自定义导航栏！

<template>  
    <view class="uni-navbar" :class="{'uni-navbar-fixed':isFixed,'uni-navbar-shadow':hasShadow}" :style="{'background-color':backgroundColor}">  
        <uni-status-bar v-if="insertStatusBar"></uni-status-bar>  
        <view class="uni-navbar-header" :style="{color:color}">  
            <view class="uni-navbar-header-btns" @tap="onClickLeft">  
                <view v-if="leftIcon.length">  
                    <uni-icon :type="leftIcon" :color="color" size="24"></uni-icon>  
                </view>  
                <view v-if="leftText.length" class="uni-navbar-btn-text" :class="{'uni-navbar-btn-icon-left':!leftIcon.length}">{{leftText}}</view>  
                <slot name="left"></slot>  
            </view>  
            <view class="uni-navbar-container">  
                <view v-if="title.length" class="uni-navbar-container-title">{{title}}</view>  
                <!-- 标题插槽 -->  
                <slot></slot>  
            </view>  
            <view class="uni-navbar-header-btns" @tap="onClickRight">  
                <view v-if="rightIcon.length">  
                    <uni-icon :type="rightIcon" :color="color" size="24"></uni-icon>  
                </view>  
                <!-- 优先显示图标 -->  
                <view v-if="rightText.length&&!rightIcon.length" class="uni-navbar-btn-text">{{rightText}}</view>  
                <slot name="right"></slot>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    import uniStatusBar from './uni-status-bar.vue'  
    import uniIcon from './uni-icon.vue'  

    export default {  
        components: {  
            uniStatusBar,  
            uniIcon  
        },  
        props: {  
            /**  
             * 标题文字  
             */  
            title: {  
                type: String,  
                default: ''  
            },  
            /**  
             * 左侧按钮文本  
             */  
            leftText: {  
                type: String,  
                default: ''  
            },  
            /**  
             * 右侧按钮文本  
             */  
            rightText: {  
                type: String,  
                default: ''  
            },  
            /**  
             * 左侧按钮图标  
             */  
            leftIcon: {  
                type: String,  
                default: ''  
            },  
            /**  
             * 右侧按钮图标  
             */  
            rightIcon: {  
                type: String,  
                default: ''  
            },  
            /**  
             * 是否固定在顶部  
             */  
            fixed: {  
                type: [Boolean, String],  
                default: false  
            },  
            /**  
             * 按钮图标和文字颜色  
             */  
            color: {  
                type: String,  
                default: '#000000'  
            },  
            /**  
             * 背景颜色  
             */  
            backgroundColor: {  
                type: String,  
                default: '#FFFFFF'  
            },  
            /**  
             * 是否包含状态栏，默认固定在顶部时包含  
             */  
            statusBar: {  
                type: [Boolean, String],  
                default: ''  
            },  
            /**  
             * 是否使用阴影，默认根据背景色判断  
             */  
            shadow: {  
                type: String,  
                default: ''  
            }  
        },  
        computed: {  
            isFixed() {  
                return String(this.fixed) === 'true'  
            },  
            insertStatusBar() {  
                switch (String(this.statusBar)) {  
                    case 'true':  
                        return true  
                    case 'false':  
                        return false  
                    default:  
                        return this.isFixed  
                }  
            },  
            hasShadow() {  
                var backgroundColor = this.backgroundColor  
                switch (String(this.shadow)) {  
                    case 'true':  
                        return true  
                    case 'false':  
                        return false  
                    default:  
                        return backgroundColor !== 'transparent' && backgroundColor.indexOf('rgba') < 0  
                }  
            }  
        },  
        methods: {  
            /**  
             * 左侧按钮点击事件  
             */  
            onClickLeft() {  
                this.$emit('clickLeft')  
                this.$emit('click-left')  
            },  
            /**  
             * 右侧按钮点击事件  
             */  
            onClickRight() {  
                this.$emit('clickRight')  
                this.$emit('click-right')  
            }  
        }  
    }  
</script>  

<style>  
    .uni-navbar {  
        display: block;  
        position: relative;  
        width: 100%;  
        background-color: #FFFFFF;  
        overflow: hidden;  
    }  

    .uni-navbar view{  
        line-height:44px;  
    }  

    .uni-navbar-shadow {  
        box-shadow: 0 1px 6px #ccc;  
    }  

    .uni-navbar.uni-navbar-fixed {  
        position: fixed;  
        z-index: 998;  
    }  

    .uni-navbar-header {  
        display: flex;  
        flex-direction: row;  
        width: 100%;  
        height:44px;  
        line-height:44px;  
        font-size: 16px;  
    }  

    .uni-navbar-header .uni-navbar-header-btns{  
        display:inline-flex;  
        flex-wrap:nowrap;  
        flex-shrink:0;  
        width: 120upx;  
        padding:0 12upx;  
    }  

    .uni-navbar-header .uni-navbar-header-btns:first-child{  
        padding-left:0;  
    }  
    .uni-navbar-header .uni-navbar-header-btns:last-child{  
        width: 60upx;  
    }  
    .uni-navbar-container{  
        width:100%;  
        margin:0 10upx;  
    }  
    .uni-navbar-container-title{  
        font-size:30upx;  
        text-align:center;  
        padding-right: 60upx;  
    }  
</style>

我们只需要在页面引用这个组件就可以实现导航栏的自定义了！具体的我就不描述了！
在模板文件中引入

        <uni-nav-bar fixed="true" :background-color="titleBg"  left-icon="back" @click-left="back" @click-right="showMenu" left-text="返回" right-text="菜单"  
         title="导航栏组件"></uni-nav-bar>

给导航栏背景定义一个titleBg

<script>  
    import uniNavBar from '../../../components/uni-nav-bar.vue'  
    export default {  
        data() {  
            return {  
                titleBg:'rgba(255,255,255,0)'  
            };  
        },  
        components: {  
            uniNavBar  
        },  
        methods: {  

        },  
        onPageScroll:function(e){  
            this.titleBg = 'rgba(255,255,255,'+e.scrollTop / 300+')';  
        }  
    }  
</script>

这样就完成了从透明到白色背景的滚动渐变样式了其他颜色修改下就可以了

收起阅读 »

有左右滑动时监听当前滑动位置

切换页面

document.querySelector('.mui-slider').addEventListener('slide', function(event) {
console.log(event.detail.slideNumber);//显示当前的位置
});

继续阅读 »

奇怪的ERR: ./app.wxss(1583:3): unexpected错误处理经验分享

css

正在开发的应用某日出现现象，在浏览器中调试正常，在手机调试时显示如下错误：

09:29:08.485 [编译] Compiling...
09:29:09.493 [错误] ERR: ./app.wxss(1583:3): unexpected 1 at pos 38716
09:29:09.493 error file count: 0
09:29:09.556 [完成] uni-app 编译完毕

然后手机上的界面一片混乱

一时无法找到原因。

后来在某个css文件中发现错误内容：
padding:15upx 3%; 100:94%;

经验：HbuildX在进行App编译遇到CSS错误时，不能正确提示错误所在的位置。而且不能指明是CSS文件出错。不过wxss本身是样式相关文件，提供了一些线索。特此分享，供大家参考。

继续阅读 »

MUI精美简洁后台管理系统界面模板

mui

MUI精美简洁后台管理系统界面模板，一套简洁大气基于MUI的后台管理模板，有登陆页，详细页，列表页，提示页，用户管理等后台常用的页面。

下载地址：http://www.sucaihuo.com/templates/860.html

继续阅读 »

多多客DOODOOKE更新插件&模块及下载附件教程

node.js 微信小程序小程序

如何进入插件市场？

1.打开链接：https://www.xxx.com/admin/public/login

2.登录超管后台，点击头部"插件"进入

多多客

如何更新插件&模块？

1.点击右上角个人头像，进入"用户中心"

2.点击更新图标，全选更新

下载小程序附件

1.点击右上角个人头像，进入"用户中心"

2.点击下载附件图标，下载小程序附件

多多客doodooke：koahub.com

继续阅读 »

APICloud虚假宣传，官网和媒体刊登致歉声明

APICloud 侵权

在法院督促下，APICloud终于在官网和媒体刊登了致歉声明。这个判决是因为APICloud虚假宣传自己的代码加密功能，被鉴定报告戳穿。法院判决赔偿并道歉。市场始终要良性竞争，企业不能依靠虚假宣传不实信息来获得竞争优势。
另外关于apicloud抄袭DCloud源码是另一个案件，一审判决apicloud赔偿DCloud165万，目前apicloud提上诉，正在二审的流程中。详见http://dcloud.io/150914/index.html?t=1523879749232