<template>
|
<div class="allwai">
|
|
<!--滚动框-->
|
<scroller v-bind:style="'width:750px; height:'+winH+'px;padding-bottom:30px;'" offset-accuracy="10" @scroll="scrollforever">
|
|
<!--顶部标识-->
|
<div ref="sctop" style="width: 750px;margin-bottom: 30px;"></div>
|
|
<!--卡片-->
|
<div v-for="(item, index) in kapian" class="kadan canclick" @click="Click_url(item.a_href)">
|
<!--图片-->
|
<div class="kaimgsize"><image class="kaimgsize" v-bind:src="item.src" resize="cover"></image></div>
|
<!--文字说明区域-->
|
<div class="katextwai fboxRow Xbetween Ycenter" @click="Click_dan('分享')">
|
<div><text class="font_ell1 font_moremax">{{item.title}}</text></div>
|
<div class="kasharewai fboxRow Xend Ycenter"><image class="kasharesize" src="https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg"></image></div>
|
</div>
|
</div>
|
|
</scroller><!--滚动框结束-->
|
|
<!--回到顶部-->
|
<div v-if="show_back" class="backtop" @click="Click_backtop">
|
<image class="backtopimg" src="https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg"></image>
|
</div>
|
|
</div>
|
</template>
|
|
|
|
<style>
|
/*通用样式*/
|
.allwai { width: 750px; position: relative; background-color: #F1F1F1; }
|
.canclick { transition-property: backgroundColor; transition-duration: 0.1s; transition-timing-function: linear; }
|
.canclick:active { background-color: rgba(0, 0, 0, 0.2); }
|
.bor { border-style: dashed; border-width: 1px; }
|
|
.fboxRow { display: flex; flex-direction: row; }
|
.fboxCol { display: flex; flex-direction: column; }
|
.flex1 { flex: 1; }
|
.flex2 { flex: 2; }
|
.Xstart { justify-content: flex-start; }
|
.Xcenter { justify-content: center; }
|
.Xend { justify-content: flex-end;}
|
.Xbetween { justify-content: space-between; }
|
.Xaround { justify-content: space-around; }
|
.Ystart { align-items: flex-start; }
|
.Ycenter { align-items: center; }
|
.Yend { align-items: flex-end; }
|
.Ystretch { align-items: stretch; }
|
|
.font_min { font-size: 23px; font-family: "微软雅黑"; color: #585858; }
|
.font_normol { font-size: 27px; font-family: "微软雅黑"; color: #585858; }
|
.font_moremax { font-size: 31px; font-family: "微软雅黑"; color: #585858; }
|
.font_max { font-size: 35px; font-family: "微软雅黑"; color: #585858; }
|
.font_ell1{ lines: 1; text-overflow: ellipsis; }
|
.font_ell2{ lines: 2; text-overflow: ellipsis; }
|
|
.font_red { color: #E60962; }
|
.font_blue { color: #63759B; }
|
.font_gray { color: #838383; }
|
.font_white { color: white; }
|
.bg_white{ background-color: white; }
|
|
/*卡片外框*/
|
.kadan{ width: 690px; margin-bottom: 30px; margin-left: 30px; background-color: white; overflow: hidden; }
|
/*图片*/
|
.kaimgsize{ width: 690px; height: 320px; }
|
/*文字说明*/
|
.katextwai{ width: 630px; height: 90px; margin-left: 30px; }
|
/*分享按钮*/
|
.kasharesize{ width: 55px; height: 55px; }
|
.kasharewai{ width: 70px; height: 90px; }
|
|
/*回到顶部*/
|
.backtop{ width: 100px; height: 100px; position: fixed; right: 30px; bottom: 30px; border-radius: 50px; opacity: 0.7; }
|
.backtopimg{ width: 100px; height: 100px; border-radius: 50px; }
|
</style>
|
|
|
|
<script>
|
|
//弹框对象
|
var modal = weex.requireModule('modal');
|
var utilModule= weex.requireModule('utilModule');
|
var stream = weex.requireModule('stream');
|
//
|
var th = null;
|
|
export default {
|
|
//数据信息
|
data: {
|
|
//页面信息
|
winH: 1000, //屏幕高度
|
show_back: false, //是否显示回到顶部小火箭
|
|
//教程卡片组
|
kapian: [
|
{ title: '花生日记功能介绍', src: "https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg", a_href: "https://www.ka0.com", },
|
{ title: '首页特色模版', src: "https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg", a_href: "https://www.ka1.com", },
|
{ title: '如何搜索优惠券', src: "https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg", a_href: "https://www.ka2.com", },
|
{ title: '花生日记功能介绍', src: "https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg", a_href: "https://www.ka0.com", },
|
{ title: '首页特色模版', src: "https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg", a_href: "https://www.ka1.com", },
|
{ title: '如何搜索优惠券', src: "https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg", a_href: "https://www.ka2.com", },
|
{ title: '花生日记功能介绍', src: "https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg", a_href: "https://www.ka0.com", },
|
{ title: '首页特色模版', src: "https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg", a_href: "https://www.ka1.com", },
|
{ title: '如何搜索优惠券', src: "https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg", a_href: "https://www.ka2.com", }
|
],
|
|
},
|
|
//创建完成(猜的)
|
created: function ()
|
{
|
th = this;
|
//获取屏幕高度
|
const dom = weex.requireModule('dom');
|
dom.getComponentRect('viewport', function(res) { th.winH = res.size.height; });
|
|
var params={"time":now()};
|
params.sign=utilModule.getSign(JSON.stringfy(params))
|
|
|
stream.fetch({
|
method: 'POST',
|
url: "http://192.168.1.122:8080/fanli/",
|
type:'json',
|
data:params
|
}, function(ret) {
|
if(!ret.ok){
|
me.postResult = "request failed";
|
}else{
|
console.log('get:'+JSON.stringify(ret));
|
me.postResult = JSON.stringify(ret.data);
|
}
|
},function(response){
|
console.log('get in progress:'+response.length);
|
me.postResult = "bytes received:"+response.length;
|
});
|
|
},
|
|
//事件定义
|
methods: {
|
|
//直接链接跳转点击，如 轮播图和广告
|
Click_url: function (ev)
|
{
|
var urlthis = ev; //获取要跳转的链接
|
|
//weex
|
utilModule.jumpWeb(urlthis);
|
|
|
|
modal.toast({
|
message: '点击了链接：' + urlthis,
|
duration: 1
|
});
|
},
|
|
//具体信息(如id)获取后跳转 点击
|
Click_dan: function (ev)
|
{
|
var daninfo = ev; //获取该节点保留信息
|
|
modal.toast({
|
message: '点击了节点：' + daninfo,
|
duration: 1
|
});
|
},
|
|
//回到顶部小火箭 点击
|
Click_backtop: function (ev)
|
{
|
//取消冒泡
|
ev.stopPropagation();
|
//回到顶部
|
const dom = weex.requireModule('dom');
|
dom.scrollToElement(th.$refs.sctop,{
|
offset: 0,
|
animated: true,
|
});
|
},
|
|
//滚动框滚动中
|
scrollforever: function (ev)
|
{
|
var viewH = th.winH; //可视高
|
var scrollH = -ev.contentOffset.y; //滚动轴移动距离
|
var allH = ev.contentSize.height; //总高度
|
|
//显示回到顶部图标
|
if (scrollH > 100) { th.show_back = true; }
|
else { th.show_back = false; }
|
|
//触底
|
if ((viewH + scrollH) > (allH - 20))
|
{
|
//弹框提示
|
modal.toast({
|
message: '触底',
|
duration: 1,
|
});
|
}
|
},
|
|
},
|
|
}
|
|
</script>
|
|
