一：实验前准备

本文将手把手教你如何制作类似今日头条的页面，仅限于本地静态数据生成，无法从服务器获取数据进行同步。

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

  
        
        今日头条
            
            
             
        
    
       
        
        
            
                {{item.text}}                                
            
            
                {{item.text}}
            
        
        
        
    
      
        
               
                
                       
                        {{item.title}}   
                             
                            
                                
                            
                        
                             
                            {{item.name}}
                            {{item.num}}评论
                            {{item.time}}分钟之前
                            
                        
                     
                
            
        
    

（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文件中注释已注明作用，如若看不懂请先回去恶补一下知识点，这里不详细解释了。

四：结语

此代码仅仅只是一个类似今日头条页面的示例，实际操作将会从服务器上请求资源数据，以及有更加复杂的需求，这只能相当于一个丐版页面，我相信优秀的读者们可以在此基础上做到更好！

本文章源码下载地址：【免费】微信小程序类今日头条页面的源码资源-CSDN文库