微信小程序制作今日头条页面

winlife_

已于 2024-03-29 16:16:15 修改

阅读量2.1k

点赞数 37

分类专栏：微信小程序开发文章标签：微信小程序小程序

于 2024-03-29 16:04:41 首次发布

本文链接：https://blog.csdn.net/m0_62670368/article/details/137145232

版权

微信小程序开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一：实验前准备

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

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

四：结语

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

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

winlife_

关注

37
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
0
评论
微信小程序制作今日头条页面

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

扫一扫