一：实验前准备
本文将手把手教你如何制作类似今日头条的页面，仅限于本地静态数据生成，无法从服务器获取数据进行同步。
1.先在微信小程序初始界面创建一个JS基础模板
2.将index文件夹里的文件逐个清空
3.将app.wxss文件清空
（目的是为了不妨碍接下来index.wxss的代码编写，否则会造成css继承导致出问题）
4.将实验所需要的图片导入（文件夹images可建可不建）
这里大家见仁见智导入自己喜欢的图片，可在阿里巴巴图标库中下载喜欢的Icon图标导入（免费下载），但需要在接下来的开发过程中晓得更改图片路径。
二：编写代码
1.index.json
{
"usingComponents": {
},
"navigationBarTitleText": "今日头条",
"navigationBarBackgroundColor": "#ff0000",
"navigationBarTextStyle": "white"
}navigationBarTitleText改变微信小程序的标题，
navigationBarBackgroundColor改变微信小程序顶栏的颜色，
navigationBarTextStyle改变微信小程序标题的字体颜色。
2.index.wxml
<view class="container"> <!--最外层容器-->
<view class="input"> <!--输入层容器-->
<text>今日头条</text>
<view class="packinput"> <!--搜索框容器-->
<image src="/images/搜索.png"></image>
<input placeholder="搜你想要的"/>
</view>
</view>
<view class="tabbar"> <!--选项栏容器-->
<scroll-view scroll-x enable-flex style="flex-direction: row;">
<block wx:for="{{items}}" wx:key="text">
<block wx:if="{{curIndex==index}}">
<button style="color: red;" data-index="{{index}}" bind:tap="shift">{{item.text}} </button>
</block>
<block wx:else>
<button style="color: black;" data-index="{{index}}" bind:tap="shift">{{item.text}}</button>
</block>
</block>
</scroll-view>
<image src="/images/加号.png"></image>
</view>
<swiper class="swi" current="{{curIndex}}" bindchange="handleSwiperChange" style="height: 450px;"> <!--滑块视图容器-->
<block wx:for="{{items}}" wx:for-item="itm" wx:key="text">
<swiper-item item-id="{{index}}"> <!--单个视图页面-->
<block wx:for="{{itm.infos}}" wx:key="title" wx:for-index="idx">
<view class="info"> <!--新闻信息容器-->
<text class="infoTitle">{{item.title}}</text> <!--信息标题-->
<view class="infoImgs"> <!--信息图片-->
<block wx:for="{{item.img}}" wx:for-item="img" wx:key="src">
<image class="infoImage" src="{{img.src}}"></image>
</block>
</view>
<view class="infoDown"> <!--信息底部内容-->
<text class="infoName">{{item.name}}</text>
<text class="infoName">{{item.num}}评论</text>
<text class="infoName">{{item.time}}分钟之前</text>
<image class="infoDownImg" src="/images/关闭.png"></image>
</view>
</view>
</block>
</swiper-item>
</block>
</swiper>
</view>（1）输入层容器
（2）导航栏容器
标红的为当前页面，可左右滑动选择。但是加号按钮的功能暂未实现，请读者自行处理。
（3）滑动视图容器
相当于子页面，可左右滑动自由切换，也可点击选项进行切换。
值得一提的是，官方的swiper组件存在高度不兼容问题，只能展现少量页面。由于作者技术有限，本文采取了一种取巧的方法，直接定死了组件的高度，强制扩展，所以会出现少量问题，这里留给读者自行改进。
（4）新闻信息容器
包装了一条新闻信息，包含了新闻的标题，图片，发布公司，评论数，发布时间
3.index.js
Page({
data: {
curIndex:0, //当前页面id
items:[ //页面数据
{
text:"推荐", //导航栏按钮文本
infos:[ //新闻信息
{
title:"推荐推荐推荐推荐", //新闻标题
img:[ //新闻图片路径（自行更改）
{src:"/images/OIP-C.jpg"},
{src:"/images/加号.png"},
{src:"/images/加号.png"},
],
name:"拉拉科技", //新闻发布公司名
num:20, //评论数
time:10 //发布时间
},
{
title:"啦啦啦啦啦啦啦啦啦啦啦",
img:[
{src:"/images/加号.png"},
{src:"/images/加号.png"},
{src:"/images/加号.png"},
],
name:"哇塞公司",
num:213,
time:43
},
{
title:"怎么了怎么了怎么了",
img:[
{src:"/images/加号.png"},
{src:"/images/加号.png"},
{src:"/images/加号.png"},
],
name:"怎么科技",
num:111,
time:12
},
]
},
{
text:"热点",
infos:[
{
title:"热点热点热点热点",
img:[
{src:"/images/加号.png"},
{src:"/images/加号.png"},
{src:"/images/加号.png"},
],
name:"热点科技",
num:76,
time:43
}]
},
{
text:"长沙",
infos:[
{
title:"长沙长沙长沙长沙",
img:[
{src:"/images/加号.png"},
{src:"/images/加号.png"},
{src:"/images/加号.png"},
],
name:"长沙科技",
num:66,
time:6
}]
},
{
text:"社会",
infos:[
{
title:"社会社会社会社会",
img:[
{src:"/images/加号.png"},
{src:"/images/加号.png"},
{src:"/images/加号.png"},
],
name:"社会科技",
num:32,
time:1
}]
},
{
text:"娱乐",
infos:[
{
title:"娱乐娱乐娱乐娱乐",
img:[
{src:"/images/加号.png"},
{src:"/images/加号.png"},
{src:"/images/加号.png"},
],
name:"娱乐科技",
num:345,
time:9
}]
},
{
text:"问答",
infos:[
{
title:"问答问答问答问答",
img:[
{src:"/images/加号.png"},
{src:"/images/加号.png"},
{src:"/images/加号.png"},
],
name:"问答科技",
num:654,
time:1
}]
},
{
text:"图片",
infos:[
{
title:"图片图片图片图片",
img:[
{src:"/images/加号.png"},
{src:"/images/加号.png"},
{src:"/images/加号.png"},
],
name:"图片公司",
num:363,
time:25
}]
},
{
text:"军事",
infos:[
{
title:"军事军事军事军事",
img:[
{src:"/images/加号.png"},
{src:"/images/加号.png"},
{src:"/images/加号.png"},
],
name:"军事集团",
num:777,
time:46
}]
}
],
},
shift(e) { //导航栏点击触发逻辑
this.setData({
curIndex:e.target.dataset.index
})
},
handleSwiperChange(e){ //滑动视图触发逻辑
this.setData({
curIndex:e.detail.current
})
}
})
index.js文件中存储页面的静态数据和页面触发逻辑。
curIndex为当前滑动视图页面id。
items为多个滑动视图的多个新闻信息。
shift(e)方法为点击导航栏文本按钮可触发滑动视图切换。
handleSwiperChange(e)方法为左右滑动视图可触发导航栏选中按钮的颜色变化。
4.index.wxss
/**index.wxss**/
page { /**页面**/
height: 100vh;
display: flex;
flex-direction: column;
}
.input{ /**输入层容器**/
height: 40px;
width: 100%;
display: flex;
flex-direction:row;
flex-wrap: nowrap;
gap: 20px;
background-color: red;
justify-content: center;
}
.packinput{ /**搜索框容器**/
display: flex;
flex-direction:row;
flex-wrap: nowrap;
gap: 10px;
background-color: white;
width: 200px;
height: 30px;
border-radius: 4px;
align-items: center;
}
.input text{ /**输入文本**/
color: white;
font-weight: bold;
font-size: larger;
}
.input input{ /**输入框**/
background-color: white;
}
.input image{ /**输入框中的图片**/
margin-left: 10px;
width: 20px;
height: 20px;
}
.tabbar{ /**导航栏容器**/
width: 100%;
height: 30px;
background-color:rgb(236, 236, 236);
display: flex;
flex-direction:row;
flex-wrap: nowrap;
}
.tabbar scroll-view{ /**导航栏滑动**/
width: 90%;
height: 30px;
background-color:rgb(236, 236, 236);
white-space: nowrap;
}
.tabbar button{ /**导航栏按钮**/
background-color: unset;
width: 50px;
height: 30px;
padding: 0 0 0 0;
margin: unset;
font-weight: thin;
display: inline-block;
font-size: medium;
}
.tabbar image{ /**导航栏图片**/
width: 30px;
height: 30px;
}
.swi{ /**滑动视图**/
display: flex;
flex-direction:column;
flex-wrap: nowrap;
}
.info{ /**信息容器**/
width: 100%;
height: 150px;
display: flex;
flex-direction:column;
flex-wrap: nowrap;
}
.infoTitle{ /**信息标题**/
font-size: large;
font-weight: bold;
margin: 0 10px 0 10px;
}
.infoImgs{ /**信息图片容器**/
display: flex;
gap: 10px;
height: 100px;
margin: 0 10px 0 10px;
}
.infoImage{ /**信息图片**/
height: 93px;
}
.infoDown{ /**信息底部**/
display: flex;
gap: 10px;
margin: 0 10px 0 10px;
}
.infoName{ /**信息底部文本**/
font-size: small;
}
.infoDownImg{ /**信息底部图片**/
height: 16px;
width: 30px;
margin-left: 70px;
}css文件中注释已注明作用，如若看不懂请先回去恶补一下知识点，这里不详细解释了。
四：结语
此代码仅仅只是一个类似今日头条页面的示例，实际操作将会从服务器上请求资源数据，以及有更加复杂的需求，这只能相当于一个丐版页面，我相信优秀的读者们可以在此基础上做到更好！文章来源：https://www.toymoban.com/news/detail-854439.html
本文章源码下载地址：【免费】微信小程序类今日头条页面的源码资源-CSDN文库文章来源地址https://www.toymoban.com/news/detail-854439.html
到了这里，关于微信小程序制作今日头条页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
