类似今日头条,头部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 ...
随机推荐
- JavaScript 环境污染
定义全局变量有 3 种方式: 在任何函数体外直接使用 var 语句声明. var f = 'value1'; 直接添加属性到全局对象上.在 Web 浏览器中,全局作用域对象为 window. wind ...
- java提升一:内部类
1.总体定义 定义在一个类中的类,就称之为内部类. 2.为什么要使用内部类 (1)使用匿名内部类,无需对只使用一次的接口实现类进行创建,方便了对于接口和抽象类的实现及其使用. (2)每个内部类都可以独 ...
- iPad适配tabBarController
iPad的tabBarController会在底部居中显示,根据不同的需求可能需要把tabBarItem均匀分布显示,具体修改如下 self.tabBar.itemPositioning = UITa ...
- 吴裕雄--天生自然java开发常用类库学习笔记:SortedMap类
import java.util.Map ; import java.util.SortedMap ; import java.util.TreeMap ; public class SortedMa ...
- POJ 1151:Atlantis 线段树+扫描线
Atlantis Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 19374 Accepted: 7358 Descrip ...
- Codeforces 2A :winner
A. Winner time limit per test 1 second memory limit per test 64 megabytes input standard input outpu ...
- CSS层级关系 学习笔记
CSS 文档流 格式化上下文 Formatting Context 即初始元素定义的环境 块格式化上下文 Block Formatting Context BFC 行内格式化上下文 ...
- 八十八、SAP中ALV事件之二,事件的定义和事件子例程
一.我们来到SE37,找到REUSE_ALV_EVENTS_GET相关的定义 二.我们需要用到下面这3个事件 三.我们添加一个第五步,并把显示ALV座位第六步.在第五步中定义三个事件 四.在末尾,添加 ...
- 041-PHP把闭包函数当做参数传递
<?php //把闭包函数当做参数传递 function demo($obj){ $obj('我爱PHP'); } # 传一个闭包过去 demo( function($txt){ echo $t ...
- 079-PHP数组排序,两次循环法封装成函数
<?php function mysort($arr){ //将排序的代码封装为函数 echo '<br />数组排序之前的信息:<br />'; print_r($ar ...