html是l面包屑效果,index.html

本文介绍了如何在网页中实现背景颜色设置、轮播图与新闻滑动效果,以及使用JavaScript操作DOM元素。同时,详细阐述了如何在移动端通过扫码功能,包括从摄像头扫码和本地相册选取图片进行二维码读取,并展示了相关的错误处理和用户交互设计。此外,还涉及了子页面切换和底部导航栏的交互逻辑。
摘要由CSDN通过智能技术生成
首页

html,

body {

background-color: #fff;

}

取消扫码

打开手电筒

精华

92号汽油将被取代,新汽油上市又要涨价新汽油上市又要涨价新汽油上市又要涨价

精华

定了!小米发布会:小米7+8,月底见!

精华

5月10日,华为再上新机!无奈:又火了

精华

小米7定档5.27!取消指纹识别功能

(function() {

mui.init({

swipeBack: true, //启用右滑关闭功能

});

var searchList = [

'热卖零食了解一下',

'夏季畅销的爆品饮料是什么',

'你从来没见过的进口食物',

'夏天除了西瓜还有什么好吃的水果'

],

searchIndex = 0,

searchLen = searchList.length;

var timer = setInterval(function() {

searchIndex++;

searchIndex = searchIndex > searchLen ? 0 : searchIndex;

$(".searchBox .mui-placeholder span:last-child").html(searchList[searchIndex]);

}, 4000)

var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id

//如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例

//解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback

down: {

offset: 60,

callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了

},

//up: {

//callback: upCallback, //上拉加载的回调

//isBounce: false //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)

//}

});

function downCallback() {

setTimeout(function() {

mescroll.endSuccess();

}, 2000)

}

function upCallback() {

}

//轮播图

var bannerSwiper = new Swiper('.banner-swiper', {

loop: true, //循环轮播

autoplay: 3000, //自动播

autoplayDisableOnInteraction: false, //用户手动滑动后不禁止自动播放

speed: 300, //速度

initialSlide: 0, //初始第几张

effect: "", //切换效果

grabCursor: true, //鼠标变手

pagination: '.swiper-pagination', // 如果需要分页器

paginationClickable: true, //点击分页控制滚动

nextButton: '.swiper-button-next', // 如果需要前进后退按钮

prevButton: '.swiper-button-prev',

});

//新闻

var newsSwiper = new Swiper('.news-swiper', {

loop: true, //循环轮播

autoplay: 3000, //自动播

autoplayDisableOnInteraction: false, //用户手动滑动后不禁止自动播放

speed: 300, //速度

direction: 'vertical', //垂直滑动

slidesPerView: 2 //同时显示2个

});

mui.plusReady(function() {

var scan;

$("#camera").click(function() {

//var cmr = plus.camera.getCamera(); //获取照相机对象

//var res = cmr.supportedImageResolutions[0];

//var fmt = cmr.supportedImageFormats[0];

//alert(cmr);

//cmr.captureImage(

//function(path) {

//alert(path);

//},

//function(err) {

//alert(err);

//}, {

//resolution: res,

//format: fmt

//}

//)

var listArr = [{

title: "扫一扫"

}, {

title: "从本地相册获取"

}]

plus.nativeUI.actionSheet({

title: "扫码",

cancel: "取消",

buttons: listArr

}, function(e) {

var index = e.index - 1;

if(index == 0) {

$("#bcid-wrap").show();

scan = new plus.barcode.Barcode('bcid');

scan.start({

vibrate:true,

sound:true

});

scan.onmarked = function(type, code, file) {

var result = code;

plus.nativeUI.alert(result, function() {

$("#bcid-wrap").hide();

scan.close();

}, "扫码结果", '好的');

};

scan.onerror = function(error) {

var result = error;

plus.nativeUI.alert(result, function() {

$("#bcid-wrap").hide();

scan.close();

}, "扫码结果", '好的');

};

} else if( index == 1 ) {

var imgUrl = null;

plus.gallery.pick( function(path){

imgUrl = path.substring(7);

imgUrl = plus.io.convertAbsoluteFileSystem(imgUrl);

if(imgUrl != ''){

plus.barcode.scan(imgUrl, function(type, result) {

plus.nativeUI.alert(result, function() {}, "扫码结果", '好的');

}, function(error) {

alert(error.message);

});

}

});

}

});

})

var lock = true;

$("#openFlash").click(function() {

scan.setFlash(lock);

lock = !lock;

})

$("#cancelBtn").click(function() {

$("#bcid-wrap").hide();

scan.close();

})

var self = plus.webview.currentWebview();

// 创建子webview窗口 并初始化

var aniShow = {};

util.initSubpage(aniShow);

var nview = plus.nativeObj.View.getViewById('tabBar'),

activePage = plus.webview.currentWebview(), //当前页面

targetPage, //指向页面

subpages = util.options.subpages, //所有子页面的数组

pageW = window.innerWidth, //屏幕的宽度

currIndex = 0;

/**

* 根据判断view控件点击位置判断切换的tab

*/

nview.addEventListener('click', function(e) {

var clientX = e.clientX;

if(clientX > 0 && clientX <= parseInt(pageW * 0.2)) {

currIndex = 0;

} else if(clientX > parseInt(pageW * 0.2) && clientX <= parseInt(pageW * 0.4)) {

currIndex = 1;

} else if(clientX > parseInt(pageW * 0.4) && clientX <= parseInt(pageW * 0.6)) {

currIndex = 2;

} else if(clientX > parseInt(pageW * 0.6) && clientX <= parseInt(pageW * 0.8)) {

currIndex = 3;

} else {

currIndex = 4;

}

// 匹配对应tab窗口

if(currIndex > 0) {

targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);

} else {

targetPage = plus.webview.currentWebview();

}

if(targetPage == activePage) { //指向页面为当前页面,不操作

return;

}

if(currIndex !== 4) { //判断是否打开新窗口

//底部选项卡切换

util.toggleNview(currIndex);

// 子页面切换

util.changeSubpage(targetPage, activePage, aniShow);

//更新当前活跃的页面

activePage = targetPage;

} else {

//第四个tab 打开新窗口

plus.webview.open('html/new-webview.html', 'new', {}, 'slide-in-right', 200);

}

});

});

})();

一键复制

编辑

Web IDE

原始数据

按行查看

历史

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值