最近开始将本身写的一些小程序开源到GitHub上面,为的是更好检验本身的编程能力,为本身后面的开源项目走出一条新的道路。javascript
咱们先看看个人小程序首页效果图java
主要功能:个人订阅和近期热门和最新内容支持左右滑动,模仿SF思否app交互式,嵌入一个swiper和N个scroll-view这样咱们就能够分开视图滚动和切换视图。git
如下是核心代码github
<view class='index_swiper'>
<swiper bindchange="changSwiper" current="{{ indexValue }}" style="height:calc(100vh - {{paddingValue}}px)"> <block wx:for="{{ containerData }}" wx:key="container{{ index }}"> <swiper-item> <scroll-view scroll-y style="height:inherit" bindscrolltolower="scrolltolower" data-index='{{ index }}'> <view class='index_swiper_box' id="{{ item.name }}"> <block wx:for="{{ item.data }}" wx:key="item{{ index }}"> <homeModule></homeModule> </block> </view> </scroll-view> </swiper-item> </block> </swiper> </view>复制代码
height:calc(100vh - {{paddingValue}}px)的意思是获取屏幕高度减去头部搜索加选择的头部就能够得出咱们swiper的高度,因为咱们想作到多个滑动视图,咱们须要去经过数据进行配置编程
tabData: [{
text: "个人订阅"
},
{
text: "近期热门"
},
{
text: "最新内容"
},
],复制代码
这个是配置选择的头部小程序
containerData: [{
name: 'subscribe',
data: [1, 2, 3]
},
{
name: 'hot',
data: [1, 2, 3, 5, 6, 5, 6, 5]
},
{
name: 'newest',
data: [1, 2, 3, 6, 5]
}
]
},复制代码
这个是配置scroll-view的数量 name:求换到第几个的id相似于锚点 data是数据,由于咱们没有服务端,就只能写一个组件经过data去渲染数据。数组
核心js代码:服务器
selectOne: function(e) {
//用于用户用户使用滑动切换触发头部对用位置更新
this.setData({
indexValue: e.currentTarget.dataset.index,
});
},//用于点击选择的头部切换到相应的位置复制代码
changSwiper: function(res) {
if (res.detail.source == "touch") {
this.setData({
// 获取到当前侧滑的索引
indexValue: res.detail.current,
});
}
}, 复制代码
scrolltolower:function(res){
//用于scroll-view模拟用户滚动到底部,加载更多,由于我这边没有服务器,就只能用数组去模拟从服务器获取到数据
var index = res.currentTarget.dataset.index;
var data = [...this.data.containerData[index].data, ...[2, 5, 6, 8]]
var name = `containerData[${index}].data`;
console.log(name);
this.setData({
[name]: data
})
} 复制代码
个人发现模块主要是一些组件嵌入进去,比较麻烦就是轮播图那块,我已经将他写成一个组件,为下个讲堂模块复用,这一块相信你们均可以实现的,我也把代码上传到GitHub上面,有兴趣的能够上去看看。app
咱们主要看看顶部那块标题,他的交互是根据你的滚动的位置去控制标题的字体大小和位置svg
咱们看核心代码
<view class='navigation' style=' background-color:{{ color }}'>
<view class='navigation_box'> <view class='navigation_box_return' bindtap='callBack'> <image src='./image/return.svg'></image> </view> <view class='navigation_box_image' bindtap='showSearch' wx:if="{{ search }}"> <image src='./image/search.svg'></image> </view> <view class='navigation_box_image narrow' bindtap='showEdit' wx:if="{{ edit }}"> <image src='./image/edit.svg'></image> </view> </view>
<view class='navigation_text' style='font-size:{{ defaultFace }}px;margin-top:{{ marginTop }}px; margin-left: {{ marginLeft }}px'>
<text>{{ title }}</text>
</view></view>
复制代码
properties: {
title: {
//接收传过来的标题名称
type: String
},
searchValue: {
//接收传过来是否显示搜索按钮
type: String,
observer: function(newVal) {
var flag = newVal == "false" ? false : true;
this.setData({
search: flag
});
}
},
editValue: {
//接收传过来是否显示编辑按钮
type: String,
observer: function(newVal) {
var flag = newVal == "false" ? false : true;
this.setData({
edit: flag
});
}
},
top: {
//接收传过来是否滚动的值
type: Number,
observer: function(newVal, oldVal, changedPath) {
this.setData({
currentValue: newVal
});
var deviation = newVal - oldVal; //向下滚动的误差值
var devContrary = oldVal - newVal; //向上滚动的误差值
if (deviation > 0) {
var mt = this.data.marginTop - deviation / 4 <= -25 ? -25 : this.data.marginTop - deviation / 4;
var ml = this.data.marginLeft + deviation / 2.5 >= 50 ? 50 : this.data.marginLeft + deviation / 2.5;
var faceValue = this.data.defaultFace - deviation / 10 <= 20 ? 20 : this.data.defaultFace - deviation / 10;
if (this.data.currentValue <= 125) { var colorValue = "transparent";
} else {
var colorValue = "#fff";
}
} else {
if (this.data.currentValue <= 125) {
var mt = this.data.marginTop + devContrary / 4 >= 10 ? 10 : this.data.marginTop + devContrary / 4;
var ml = this.data.marginLeft + deviation / 2.5 <= 0 ? 0 : this.data.marginLeft + deviation / 2.5;
var faceValue = this.data.defaultFace + devContrary / 10 >= 30 ? 30 : this.data.defaultFace + devContrary / 10;
var colorValue = "transparent";
} else {
var mt = -25;
var ml = 50;
var faceValue = 20;
var colorValue = "#fff";
}
}
this.setData({
marginTop: mt,
marginLeft: ml,
defaultFace: faceValue,
color: colorValue
})
}
}, bgColor: {
//接收传过来的背景颜色
type: String,
observer: function(newVal) {
this.setData({
color: newVal
});
}
}
},复制代码
咱们经过接收值的方式,拿到相应导航栏的配置,接收滚动的位置,经过老值和新值相减来知道是向下滚动仍是向上滚动,这样咱们经过三元表达式来知道是否超出咱们规定的一个值,由于咱们滚动的值会愈来愈大,咱们须要去除以一个整数来使得这个标题的变化更明显。
讲堂这个模块也是如此,好多的复用组件插入进来,这个部分很简单
消息模块是一个静态页面,因为时间问题,我如今没有开发
这是个人模块,里面大多数功能我已经实现好了,主要逻辑也是组件,文件配置等,这部分我会下章为你们详细讲解,因为开发周期才差很少一个月好多东西我都没有弄好,抱歉,能力有限,在后面的时间我会完善这些功能项目差很少有20多个页面和10几个组件,我以为在这个项目中学到好多小程序的知识,特地写这篇文章给你们分享一下。
最后,附上项目的GitHub地址:SF思否小程序
文章转载请联系我:qq:652165177,请不要用于商业用途,若有版权问题请联系我!