计算content的高度
wx.getSystemInfoSync().windowHeight - (导航高度/2)
this.setData({height:height})
三目运算符判断导航是否显示激活样式
class="{{item.id == activeChannel ? 'active' : ''}}"
导航使用数组对象方式遍历出来
channels:[
{ name: '推荐', id: 'tuijian', data: [] },
{ name: '热点', id: 'redian', data: [] },
{ name: '本地', id: 'bendi', data: [] },
{ name: '社会', id: 'shehui', data: [] },
{ name: '娱乐', id: 'yule', data: [] },
{ name: '军事', id: 'junshi', data: [] },
{ name: '科技', id: 'keji', data: [] },
{ name: '汽车', id: 'qiche', data: [] }
],
activeChannel:'tuijian'
<view class="{{item.id == activeChannel ? 'active' : ''}}" wx:for='{{channels}}'>{{item.name}}</view>
内容列表使用两个遍历做出来(可以看出wx:for就是个遍历)
<!--内容区域 start-->
<view id='content' class='' style='height:{{content_height}}px'>
<swiper>
<swiper-item class='' wx:for="{{channels}}" wx:for-item='pinDao'>
<scroll-view class='news-list' scroll-y>
<view class='item' wx:for="{{pinDao.data}}">
<view class='title'>
</view>
<view class='media'>
央视快评 796评论
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
<!--内容区域 end-->
请求接口数据
wx.request 文案中有示例,放在onload中
php获取api接口数据的方法
请求接口报错request...
设置-项目设置-不校验合法域名
到后台配置request合法域名(https)
在另一个对象里面,要接收this指向
var that = this
导航点击切换
在遍历时,把每个导航项id在标签上以data-id名字存起来
clickChangeChannel: function (e) {
var id = e.currentTarget.dataset.id;
this.setData({ 'activeChannel': id })
},
点击跑到最左效果,还有跑最左带动画
文档 scroll-into-view scroll-with-animation
点击导航后,内容区的滑动
swiper上的current-item-id和swiper-item上的item-id
点击导航后,显示内容区的内容
先给导航每个项加index,以data-index='{{index}}'来加(才能传到当前事件中去 e.curr...)
判断当前data中有没有数据,没有就去请求。 this.data.channels[index].data.length == 0
写法:var key = 'channels['+index+'].data';
[key]
滑动swiper,实现导航改变和内容改变
利用bindchange
swiper-item 设置data-index后,在e.e.curr...中获取不到,我们用e.detail.current代替
//滑动切换频道
swiperChangeChannel:function(e){
//获取当前元素的itemId
var id = e.detail.currentItemId;
//设置导航对应
this.setData({'activeChannel':id});
//获取当前元素的下标
var index = e.detail.current;
//接收this指向
var that = this;
if (this.data.channels[index].data.length == 0) {
//无数据则去请求接口
wx.request({
url: 'https://c.m.163.com/nc/article/headline/data/10-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985878&sign=oDwq9mBweKUtUuiS%2FPvB015PyTDKHSxuyuVq2076XQB48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore',
success(res) {
console.log(res.data);
var key = 'channels[' + index + '].data';
that.setData({ [key]: res.data.data })
}
})
}
点击跳转到内容详情页
navigater
网易新闻内容接口
替换内容区中的图片注释
将html转换成小程序能识别的内容
wxParse
url传参
获取url参数options.id
滑动到底部加载新数据
事件+合并数据
this.data 表示当前页面对象中的data
e 表示事件中的一些玩意
删除数组中的元素用splice(和原生splice不同,这里只有删除功能)
this.data.channels.splice(index, 1);
this.setData({ channels: this.data.channels});
往数组中添加元素用push
this.data.otherChannels.push(removeItem);
bug
原因是删除频道数组后会触发swiper的bindchange。未解决。
把整个的swiper视图放到js中重新构建可能可以,懒得做了。
仿头条小程序
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 我们有位领导,算不上大企业家,也上不得媒体头条,但是全公司的员工都想跟着他干。魅力咋就这么大?其实全在两个字——格...