最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

世界今头条！半天时间写完一个案例，循序渐进的掌握uni-app，使用uni-app完成一个简单项目——新闻列表

来源：博客园

一、创建项目

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。


(资料图片仅供参考)

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习

1、创建新项目配置初始化

1.1、创建一个项目，项目名称为新新闻，自己做案例的时候可以使用随便起名

运行结果

1.2、项目文件

1.3、在page文件下创建一个user页面

1.4、在pages.json中配置内容

添加一个tabBar，图标在inconfont可免费下载

{    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages        {            "path": "pages/index/index",            "style": {                "navigationBarTitleText": "新新闻"            }        }        ,{            "path" : "pages/user/user",            "style" :                                                                                                {                "navigationBarTitleText": "个人中心",                "enablePullDownRefresh": false            }                    }    ],    // 全局配置    "globalStyle": {        // 有比较亮的背景颜色尽量搭配白色文字        "navigationBarTextStyle": "white",        "navigationBarTitleText": "新新闻",        "navigationBarBackgroundColor": "#31C27C",        "backgroundColor": "#F8F8F8"    },    "uniIdRouter": {},    // 底部导航，路由跳转    "tabBar": {        // 颜色，选中颜色，尽量选择跟图标一样的颜色        "color": "#666",                "selectedColor": "#31C27C",        "list":[            {                // 头部标题                "text": "首页",                // 路径                "pagePath": "pages/index/index",                // 底部图标                "iconPath": "static/images/home.png",                // 底部选中图标                "selectedIconPath": "static/images/home-h.png"            },            {                "text": "个人",                "pagePath": "pages/user/user",                "iconPath": "static/images/user.png",                "selectedIconPath": "static/images/user-h.png"            }        ]                        }}
View Code

配置后效果如下

2、实现横向滚动条样式

2.1、index/index.vue

<script>    export default {        data() {            return {                title: "Hello"            }        },        onLoad() {        },        methods: {        }    }</script>
View Code

3、公共模块定义components

3.1、创建组件components

3.2、编写样式

把组件newsbox引入index.vue

在newsbox.vue编写内容布局及样式（字体改36rpx）

<script>    export default {        name:"newsbox",        data() {            return {                            };        }    }</script>
View Code

4、布局个人中心页面定义组件默认值

4.1、在newsbox组件写插值语法，

newsbox.vue

<script>    export default {        name:"newsbox",        // 接受组件，然后是一个对象，        props:{            // 定义一个对象            item:{                type:Object,                default(){                    return{                        title:"组件内默认标题",                        author:"张小三",                        hits:688,                        picture:"../../static/images/nopic.jpg"                    }                }            }        },        data() {            return {                            };        }    }</script>
View Code

个人中心页面user.vue

<script>    export default {        data() {            return {                            };        }    }</script>
View Code

5、根据不同条件渲染组件差异化

5.1、首页在文字下方是浏览量，个人中心浏览历史文字下方是发布时间

6、点击导航显示高亮

做判断，什么时候需要显示高亮

国内

更改后：

7、详情布局，将原生事件绑定到组件中

7.1、新建一个详情页detail.vue

user.vue 和index.vue   　　　　 // 跳转到详情页            goDetail(){                uni.navigateTo({                    url:"../detail/detail"                })            }

7.2、接下来布局详情页

首先一个框架

添加样式后：

<script>    export default {        data() {            return {                            };        }    }</script>
View Code

二、数据交互

2.1、首页接口

2.2、导航内容切换

根据cid可以切换

2.3、做一个判断

导航没有数据的时候就显示

三、

四、

五、

关键词：