类似今日头条,头部tab可滑动,下面的内容可跟着滚动,掺杂着vue和require等用法例子
1、在main.js里
/*主模块的入口 结合require一起使用*/
require.config({//require的基础用法 配置一下
paths: {
"Zepto" : "zepto.min",
"fastclick":"fastclick",
"jquery-weui": "jquery-weui.min",
"vue": "vue.min",
"swiper": "swiper.min.new",
"url": "base_url",
"vue-resource":"vue-resource",
"base64":"jquery.base64",
"common":"../../js/wsc/common",
"wx":"https://res.wx.qq.com/open/js/jweixin-1.2.0",
"commonShare":"../../js/wsc/common_share",
},
shim: {//下面这些是非规范AMD
'jquery-weui': {
deps: ['Zepto']
},
'swiper': {
deps: ['Zepto']
},
'vue': {
exports: 'Vue'
},
'vue-resource': {
deps: ['vue'],
//exports: 'vue-resource'
},
'base64':{//不是AMD写法
deps: ['Zepto'],
},
'url': {
deps: ['Zepto']
},
'commonShare': {
deps: ['wx']
},
} }); require(['Zepto','fastclick','jquery-weui', 'vue', "swiper", "url", "vue-resource","base64","common","wx","commonShare"], function (){
var currentPage = $("#current-page").attr("current-page");
var targetModule = $("#current-page").attr("target-module");
if (targetModule) {
// 页面加载完毕后再执行相关业务代码比较稳妥
$(function () {
if(currentPage == 'manage_address'){
require(["city-data"], function (x) {
require(["city-picker"], function (x) {
require([targetModule], function (targetModule) {
// 不要在这里写业务代码
//全部统一调用init方法
//也就是每个模块都暴露一个init方法用于事件监听,页面内容加载等
targetModule.init(currentPage);
});
})
})
}else{
require([targetModule], function (targetModule) {
// 不要在这里写业务代码
//全部统一调用init方法
//也就是每个模块都暴露一个init方法用于事件监听,页面内容加载等
targetModule.init(currentPage);
});
}
});
return;
}
});
2、在页面里
<div class="swiper-container2">
<div class="swiper-wrapper" >
<div class="swiper-slide PDB60">
<!--轮播图-->
<div class="swiper-container carousel loop" >
<div class="swiper-wrapper">
<div class="swiper-slide" >
<img src="img/1.jpg" />
</div>
<div class="swiper-slide" >
<img src="img/1.jpg" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper-slide" v-for="i in 8">Slide {{i}}</div>
</div>
</div>
</div>
//所有的页面引入一个公共的require入口
<script src="../../static/js/require.js" id="current-page" defer async="true" data-main="../../static/js/main" current-page="wsc_index" target-module="../../js/wsc/wsc_index"></script>
3、在每个页面对应的js里
define(['Zepto','vue','common','vue-resource','swiper'],function($,Vue,com,VueResource,Swiper){
var newCtrl = {};
newCtrl.init = function (page) {
Vue.use(VueResource);//这里得use一下
var vue = new Vue({
el: '.app',
data: {
tabs:['热门','男装','鞋包','手机','电器','食品','百货','服饰','tab..'],//头部所有可以滑动的tab
currentTabIndex:0,//当前的tab的点击
loop:'',//页面的局部轮播图
mySwiper:'',//头部的tab
pageSwiper:'',//页面的轮播
},
created: function () {
var that = this
that.footer_list=com.getFooterList();
},
mounted: function () {
var that = this;
that.initSwiper();
// 页面的滚动
that.getPageSwiper();
},
methods: {
initSwiper: function(){
//头部可滑动tab
this.mySwiper = new Swiper('#topNav', {
freeMode: true,
freeModeMomentumRatio: 0.5,
slidesPerView: 'auto',
});
//页面局部小轮播图
this.loop= new Swiper('.loop', {
pagination: '.swiper-pagination',
autoplay: 2000,
speed: 500,
loop: true,
onSlideChangeStart: function (swiper) {
swiper.startAutoplay();
},
})
},
swiperTab:function(swiper, e){
var that = this;
that.pageSwiper.slideTo(that.mySwiper.clickedIndex, 1000, false);//跳转
// e.preventDefault()
slide = that.mySwiper.slides[that.mySwiper.clickedIndex] slideLeft = slide.offsetLeft
slideWidth = slide.clientWidth
slideCenter = slideLeft + slideWidth / 2
// 被点击slide的中心点
that.mySwiper.setWrapperTransition(300)
if (slideCenter < swiperWidth / 2) {
that.mySwiper.setWrapperTranslate(0)
} else if (slideCenter > maxWidth) {
that.mySwiper.setWrapperTranslate(maxTranslate)
} else {
nowTlanslate = slideCenter - swiperWidth / 2
that.mySwiper.setWrapperTranslate(-nowTlanslate)
}
},
//点击头部的tab
clickTab:function(index,item){
var that =this;
this.currentTabIndex=index;
},
getPageSwiper:function(){
var that = this;
swiperWidth = this.mySwiper.container[0].clientWidth
maxTranslate = this.mySwiper.maxTranslate();
maxWidth = -maxTranslate + swiperWidth / 2
this.pageSwiper = new Swiper('.swiper-container2', {
paginationClickable: true,
uniqueNavElements :false,
onSlideChangeStart: function(swiper){
that.currentTabIndex = swiper.activeIndex;
slide = that.mySwiper.slides[swiper.activeIndex];//获取当前的slide节点
slideLeft = slide.offsetLeft
slideWidth = slide.clientWidth
slideCenter = slideLeft + slideWidth / 2
// 被点击slide的中心点
that.mySwiper.setWrapperTransition(300)
if (slideCenter < swiperWidth / 2) {
that.mySwiper.setWrapperTranslate(0)
} else if (slideCenter >maxWidth) {
that.mySwiper.setWrapperTranslate(maxTranslate)
} else {
nowTlanslate = slideCenter - swiperWidth / 2
that.mySwiper.setWrapperTranslate(-nowTlanslate)
}
}
}); },
}
})
};
newCtrl.login = function () {};
return newCtrl;
})
4、在css里
#topNav {
width: 100%;
overflow: hidden;
font: 16px/32px hiragino sans gb, microsoft yahei, simsun;
border-bottom:1px solid #f8f8f8;
height:44px;
line-height:44px;
}
#topNav .swiper-slide {
padding: 0 5px;
letter-spacing:2px;
width:3rem;
text-align:center;
}
#topNav .swiper-slide span{
font-size:15px;
transition:all .3s ease;
display:inline-block;
height:90%;
}
#topNav .active span{
transform:scale(1.1);
color:#FF2D2D;
}
img{
width:100%;
line-height:;
max-height:150px;
}
.swiper-container2 {
width: 100%;
/*height: 90vh;*/
}
.swiper-container2 .swiper-slide{
background: #fff;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff; /* Center slide text vertically */
/* display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;*/
}
类似今日头条,头部tab可滑动,下面的内容可跟着滚动,掺杂着vue和require等用法例子的更多相关文章
- [Android] Android 类似今日头条顶部的TabLayout 滑动标签栏 效果
APP市场中大多数新闻App都有导航菜单,导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面,今日头条, 网易新闻等. 本文主要讲的是用:T ...
- swfit - 实现类似今日头条顶部标签和底部内容的动态解决方案
TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...
- swift - 实现类似今日头条顶部标签和底部内容的动态解决方案
TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...
- <Android 应用 之路> 一个类似今日头条的APP
简介 最近花了一两天的时间完成一个简易的新闻头条客户端的应用,引用到了SwipeRefreshLayout,CircleImageView,RxAndroid,Picasso,PhotoPicker等 ...
- [Android] Android 实现类似 今日头条 视频播放列表
演示实例如下: Talk is cheap. Show me the code 话不多说,代码在这里下载! https://github.com/wukong1688/Android_BaseVide ...
- 仿今日头条最强顶部导航指示器,支持6种模式-b
项目中经常会用到类似今日头条中顶部的导航指示器,我也经常用一个类似的库PagerSlidingTabStrip,但是有时并不能小伙伴们的所有需求,所以我在这个类的基础上就所有能用到的情况做了一个简单的 ...
- 自定义控件实现-今日头条Android APP图集效果
前提 产品有个新需求,类似今日头条的图集效果 大致看了下UI,大致就是ViewPager,横向滑动切换图片,纵向滑动移动图片,纵向超过一定距离,图片飞出,图集淡出动画退出,支持图片的双击放大. 思路 ...
- vue 仿今日头条
vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...
- 自适应 Tab 宽度可以滑动文字逐渐变色的 TabLayout(仿今日头条顶部导航)
TabLayout相信大家都用过,2015年Google大会上发布了新的Android Support Design库里面包含了很多新的控件,其中就包含TabLayout,它可以配合ViewPager ...
随机推荐
- swoole之建立 http server
一.代码部分 <?php /** * 传统:nginx <-> php-fpm(fast-cgi process manager) <-> php * swoole:ht ...
- 使用gulp 进行ES6开发
使用gulp 进行ES6开发 一.新建项目 项目结构如下: /app -- /js -- /css /dist -- /js -- /css -- index.html gulpfile.js 我们的 ...
- Metasploit学习笔记——环境配置
<Metasploit渗透测试魔鬼训练营>书56页开始配置网络环境,一共五台机器,攻击机换成了自己更常用的kali,配置方法和back track相同. kali(攻击机) 10.10.1 ...
- Day4 - L - Tram POJ - 1847
Tram network in Zagreb consists of a number of intersections and rails connecting some of them. In e ...
- 7.7 Varnishadm命令
- eshop7-mysql
1. Mysql 安装 执行 yum -y install mysql-server 注意:(1)是否使用sudo 权限执行请根据您具体环境来决定 (2)检查是否已经安装mysql-server rp ...
- python实现二分法
前言: 二分法主要是用来查找位置的id,每次能够排除掉一半的数据,查找的效率非常高,但是局限性比较大. 必须是有序序列才可以使用二分查找. 原理 首先,假设表中元素是按升序排列,将表中间位置记录的关键 ...
- hadoop 配置问题以及HDFS下如何读写文件
辛辛苦苦学两年 ,一举回到解放前!!! 大数据开始学真的头疼 关键是linux你玩的不6 唉难受 hadoop 配置参见博客 http://dblab.xmu.edu.cn/blog/install- ...
- 吴裕雄--天生自然java开发常用类库学习笔记:List接口
import java.util.ArrayList ; import java.util.List ; import java.util.Collection ; public class Arra ...
- 51nod 1515:明辨是非 并查集合并
1515 明辨是非 题目来源: 原创 基准时间限制:1 秒 空间限制:131072 KB 分值: 160 难度:6级算法题 收藏 关注 给n组操作,每组操作形式为x y p. 当p为1时,如果第x ...