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等用法例子的更多相关文章

  1. [Android] Android 类似今日头条顶部的TabLayout 滑动标签栏 效果

    APP市场中大多数新闻App都有导航菜单,导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面,今日头条, 网易新闻等. 本文主要讲的是用:T ...

  2. swfit - 实现类似今日头条顶部标签和底部内容的动态解决方案

    TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...

  3. swift - 实现类似今日头条顶部标签和底部内容的动态解决方案

    TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...

  4. <Android 应用 之路> 一个类似今日头条的APP

    简介 最近花了一两天的时间完成一个简易的新闻头条客户端的应用,引用到了SwipeRefreshLayout,CircleImageView,RxAndroid,Picasso,PhotoPicker等 ...

  5. [Android] Android 实现类似 今日头条 视频播放列表

    演示实例如下: Talk is cheap. Show me the code 话不多说,代码在这里下载! https://github.com/wukong1688/Android_BaseVide ...

  6. 仿今日头条最强顶部导航指示器,支持6种模式-b

    项目中经常会用到类似今日头条中顶部的导航指示器,我也经常用一个类似的库PagerSlidingTabStrip,但是有时并不能小伙伴们的所有需求,所以我在这个类的基础上就所有能用到的情况做了一个简单的 ...

  7. 自定义控件实现-今日头条Android APP图集效果

    前提 产品有个新需求,类似今日头条的图集效果 大致看了下UI,大致就是ViewPager,横向滑动切换图片,纵向滑动移动图片,纵向超过一定距离,图片飞出,图集淡出动画退出,支持图片的双击放大. 思路 ...

  8. vue 仿今日头条

    vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...

  9. 自适应 Tab 宽度可以滑动文字逐渐变色的 TabLayout(仿今日头条顶部导航)

    TabLayout相信大家都用过,2015年Google大会上发布了新的Android Support Design库里面包含了很多新的控件,其中就包含TabLayout,它可以配合ViewPager ...

随机推荐

  1. JavaScript 环境污染

    定义全局变量有 3 种方式: 在任何函数体外直接使用 var 语句声明. var f = 'value1'; 直接添加属性到全局对象上.在 Web 浏览器中,全局作用域对象为 window. wind ...

  2. java提升一:内部类

    1.总体定义 定义在一个类中的类,就称之为内部类. 2.为什么要使用内部类 (1)使用匿名内部类,无需对只使用一次的接口实现类进行创建,方便了对于接口和抽象类的实现及其使用. (2)每个内部类都可以独 ...

  3. iPad适配tabBarController

    iPad的tabBarController会在底部居中显示,根据不同的需求可能需要把tabBarItem均匀分布显示,具体修改如下 self.tabBar.itemPositioning = UITa ...

  4. 吴裕雄--天生自然java开发常用类库学习笔记:SortedMap类

    import java.util.Map ; import java.util.SortedMap ; import java.util.TreeMap ; public class SortedMa ...

  5. POJ 1151:Atlantis 线段树+扫描线

    Atlantis Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 19374   Accepted: 7358 Descrip ...

  6. Codeforces 2A :winner

    A. Winner time limit per test 1 second memory limit per test 64 megabytes input standard input outpu ...

  7. CSS层级关系 学习笔记

        CSS 文档流   格式化上下文 Formatting Context 即初始元素定义的环境 块格式化上下文  Block Formatting Context BFC 行内格式化上下文   ...

  8. 八十八、SAP中ALV事件之二,事件的定义和事件子例程

    一.我们来到SE37,找到REUSE_ALV_EVENTS_GET相关的定义 二.我们需要用到下面这3个事件 三.我们添加一个第五步,并把显示ALV座位第六步.在第五步中定义三个事件 四.在末尾,添加 ...

  9. 041-PHP把闭包函数当做参数传递

    <?php //把闭包函数当做参数传递 function demo($obj){ $obj('我爱PHP'); } # 传一个闭包过去 demo( function($txt){ echo $t ...

  10. 079-PHP数组排序,两次循环法封装成函数

    <?php function mysort($arr){ //将排序的代码封装为函数 echo '<br />数组排序之前的信息:<br />'; print_r($ar ...