首页 / 前端技术 / uni-app

使用Python+uniapp快速开发社区交友APP

fvtm28744 6 字体： 放大 缩小

基本样式效果图：

修改首页：pages/index/index.vue

<template>

<view>

<!--图文列表样式-->

<view class="card-content">

<!-- 头像昵称 | 关注按钮 -->

<view class="header">

<view class="media">

<!-- 头像 -->

<image class="img" src="/static/tabbar/home.png" lazy-load></image>

<!-- 昵称 -->

<view>

<view class="title">昵称</view>

<text class="intro">2022-10-10 下午 03:33</text>

</view>

</view>

<!-- 关注按钮 -->

<view class="btn">关注</view>

</view>

<!-- 标题 -->

<view class="content-title">我的标题</view>

<!-- 图片 -->

<image class="content-img" src="/static/demo/datapic/11.jpg"></image>

<!-- 图标按钮 -->

<view class="actions">

<view class="action-content">

<text class="iconfont icon-zan action-icon"></text>

<text>1</text>

</view>

<view class="action-content">

<text class="iconfont icon-cai action-icon"></text>

<text>1</text>

</view>

<view class="action-content">

<text class="iconfont icon-pinglun action-icon"></text>

<text>1</text>

</view>

<view class="action-content">

<text class="iconfont icon-fenxiang action-icon"></text>

<text>4</text>

</view>

</view>

</view>

</view>

</template>

<script></script>

<style>

/* 图文列表样式开始 */

.card-content {

padding: 20rpx;

}

/* 头部样式 */

.card-content .header {

display: flex;

align-items: center;

justify-content: space-between;

}

.card-content .header .media {

display: flex;

align-items: center;

}

.card-content .header .media .img {

width: 65rpx;

height: 65rpx;

border-radius: 100%;

margin-right: 10rpx;

}

.card-content .header .media .title {

font-size: 30rpx;

}

.card-content .header .media .intro {

color: #9d9589;

font-size: 25rpx;

}

.card-content .header .btn {

width: 90rpx;

height: 50rpx;

display: flex;

align-items: center;

justify-content: center;

border-radius: 5rpx;

background-color: #ff4a6a;

color: #ffffff;

}

/* 内容标题 */

.card-content .content-title{

font-size: 30rpx;

margin: 10rpx 0;

}

/* 内容图片样式 */

.card-content .content-img {

height: 350rpx;

width: 100%;

border-radius: 5rpx;

}

/* 图标按钮 */

.card-content .actions {

display: flex;

align-items: center;

}

.card-content .actions .action-content {

flex: 1;

display: flex;

align-items: center;

justify-content: center;

}

.card-content .actions .action-content .action-icon {

margin-right: 20rpx;

}

/* 图文列表样式结束 */

</style>

动态渲染图文列表第一步：准备数据

articles: [

{

id: 1,

author: '张大鹏', // 昵称

avatar: '/static/tabbar/home.png', // 头像

title: '我的标题111', // 标题

pub_date: '2022-10-10 下午 03:33', // 发布时间

img: '/static/demo/datapic/11.jpg', // 封面图片

good_num: 333, // 支持数量

bad_num: 3, // 反对数量

comment_num: 33, // 评论数量

share_num: 33, // 分享数量

is_follow: false, // 是否关注

support_type: 'good' // 支持类型: good/bad，为空则还没有表态

}

]

第二步：渲染数据

<block v-for="(article, index) in articles" :key="index">

<!--图文列表样式-->

<view class="card-content">

<!-- 头像昵称 | 关注按钮 -->

<view class="header">

<view class="media">

<!-- 头像 -->

<image class="img" :src="article.avatar" lazy-load></image>

<!-- 昵称 -->

<view>

<view class="title">{{article.author}}</view>

<text class="intro">{{article.pub_date}}</text>

</view>

</view>

<!-- 关注按钮 -->

<view class="btn">关注</view>

</view>

<!-- 标题 -->

<view class="content-title">{{article.title}}</view>

<!-- 图片 -->

<image class="content-img" :src="article.img"></image>

<!-- 图标按钮 -->

<view class="actions">

<view class="action-content">

<text class="iconfont icon-zan action-icon"></text>

<text>{{article.good_num}}</text>

</view>

<view class="action-content">

<text class="iconfont icon-cai action-icon"></text>

<text>{{article.bad_num}}</text>

</view>

<view class="action-content">

<text class="iconfont icon-pinglun action-icon"></text>

<text>{{article.comment_num}}</text>

</view>

<view class="action-content">

<text class="iconfont icon-fenxiang action-icon"></text>

<text>{{article.share_num}}</text>

</view>

</view>

</view>

</block>

首页完整代码：pages/index/index.vue

<template>

<view>

<block v-for="(article, index) in articles" :key="index">

<!--图文列表样式-->

<view class="card-content">

<!-- 头像昵称 | 关注按钮 -->

<view class="header">

<view class="media">

<!-- 头像 -->

<image class="img" :src="article.avatar" lazy-load></image>

<!-- 昵称 -->

<view>

<view class="title">{{article.author}}</view>

<text class="intro">{{article.pub_date}}</text>

</view>

</view>

<!-- 关注按钮 -->

<view class="btn">关注</view>

</view>

<!-- 标题 -->

<view class="content-title">{{article.title}}</view>

<!-- 图片 -->

<image class="content-img" :src="article.img"></image>

<!-- 图标按钮 -->

<view class="actions">

<view class="action-content">

<text class="iconfont icon-zan action-icon"></text>

<text>{{article.good_num}}</text>

</view>

<view class="action-content">

<text class="iconfont icon-cai action-icon"></text>

<text>{{article.bad_num}}</text>

</view>

<view class="action-content">

<text class="iconfont icon-pinglun action-icon"></text>

<text>{{article.comment_num}}</text>

</view>

<view class="action-content">

<text class="iconfont icon-fenxiang action-icon"></text>

<text>{{article.share_num}}</text>

</view>

</view>

</view>

</block>

</view>

</template>

<script>

export default {

data() {

return {

// 文章列表

articles: [

{

id: 1,

author: '张大鹏', // 昵称

avatar: '/static/tabbar/home.png', // 头像

title: '我的标题111', // 标题

pub_date: '2022-10-10 下午 03:33', // 发布时间

img: '/static/demo/datapic/11.jpg', // 封面图片

good_num: 333, // 支持数量

bad_num: 3, // 反对数量

comment_num: 33, // 评论数量

share_num: 33, // 分享数量

is_follow: false, // 是否关注

support_type: 'good' // 支持类型: good/bad，为空则还没有表态

}

]

};

},

methods: {}

};

</script>

<style>

/* 图文列表样式开始 */

.card-content {

padding: 20rpx;

}

/* 头部样式 */

.card-content .header {

display: flex;

align-items: center;

justify-content: space-between;

}

.card-content .header .media {

display: flex;

align-items: center;

}

.card-content .header .media .img {

width: 65rpx;

height: 65rpx;

border-radius: 100%;

margin-right: 10rpx;

}

.card-content .header .media .title {

font-size: 30rpx;

}

.card-content .header .media .intro {

color: #9d9589;

font-size: 25rpx;

}

.card-content .header .btn {

width: 90rpx;

height: 50rpx;

display: flex;

align-items: center;

justify-content: center;

border-radius: 5rpx;

background-color: #ff4a6a;

color: #ffffff;

}

/* 内容标题 */

.card-content .content-title {

font-size: 30rpx;

margin: 10rpx 0;

}

/* 内容图片样式 */

.card-content .content-img {

height: 350rpx;

width: 100%;

border-radius: 5rpx;

}

/* 图标按钮 */

.card-content .actions {

display: flex;

align-items: center;

}

.card-content .actions .action-content {

flex: 1;

display: flex;

align-items: center;

justify-content: center;

}

.card-content .actions .action-content .action-icon {

margin-right: 20rpx;

}

/* 图文列表样式结束 */

</style>

封装文章卡片组件这一步主要是抽离文章卡片相关的元素和样式。文章列表主要是用来渲染数据的，所以，接收要渲染的数据即可。

在uniapp中要实现组件的封装，和vue的封装思想完全一样，遵循以下步骤：

创建一个vue文件

通过props接收外部传过来的属性

在vue文件中封装该组件自己的元素，样式，逻辑

在父组件中引入封装好的组件并进行使用

新增文章卡片组件：components/card/CardArticle.vue

<template>

<!--图文列表样式-->

<view class="card-content">

<!-- 头像昵称 | 关注按钮 -->

<view class="header">

<view class="media">

<!-- 头像 -->

<image class="img" :src="item.avatar" lazy-load></image>

<!-- 昵称 -->

<view>

<view class="title">{{ item.author }}</view>

<text class="intro">{{ item.pub_date }}</text>

</view>

</view>

<!-- 关注按钮 -->

<view class="btn">关注</view>

</view>

<!-- 标题 -->

<view class="content-title">{{ item.title }}</view>

<!-- 图片 -->

<image class="content-img" :src="item.img"></image>

<!-- 图标按钮 -->

<view class="actions">

<view class="action-content">

<text class="iconfont icon-zan action-icon"></text>

<text>{{ item.good_num }}</text>

</view>

<view class="action-content">

<text class="iconfont icon-cai action-icon"></text>

<text>{{ item.bad_num }}</text>

</view>

<view class="action-content">

<text class="iconfont icon-pinglun action-icon"></text>

<text>{{ item.comment_num }}</text>

</view>

<view class="action-content">

<text class="iconfont icon-fenxiang action-icon"></text>

<text>{{ item.share_num }}</text>

</view>

</view>

</view>

</template>

<script>

export default {

props: {

item: Object,

}

};

</script>

<style scoped>

/* 图文列表样式开始 */

.card-content {

padding: 20rpx;

}

/* 头部样式 */

.card-content .header {

display: flex;

align-items: center;

justify-content: space-between;

}

.card-content .header .media {

display: flex;

align-items: center;

}

.card-content .header .media .img {

width: 65rpx;

height: 65rpx;

border-radius: 100%;

margin-right: 10rpx;

}

.card-content .header .media .title {

font-size: 30rpx;

}

.card-content .header .media .intro {

color: #9d9589;

font-size: 25rpx;

}

.card-content .header .btn {

width: 90rpx;

height: 50rpx;

display: flex;

align-items: center;

justify-content: center;

border-radius: 5rpx;

background-color: #ff4a6a;

color: #ffffff;

}

/* 内容标题 */

.card-content .content-title {

font-size: 30rpx;

margin: 10rpx 0;

}

/* 内容图片样式 */

.card-content .content-img {

height: 350rpx;

width: 100%;

border-radius: 5rpx;

}

/* 图标按钮 */

.card-content .actions {

display: flex;

align-items: center;

}

.card-content .actions .action-content {

flex: 1;

display: flex;

align-items: center;

justify-content: center;

}

.card-content .actions .action-content .action-icon {

margin-right: 20rpx;

}

/* 图文列表样式结束 */

</style>

简化首页代码要使用文章卡片组件，基本遵循以下步骤：

引入文章卡片组件

在components中声明该组件

使用该组件

第一步：引入

import CardArticle from '@/components/card/CardArticle.vue';

第二步：声明

export default {

components:{

CardArticle,

},

}

第三步：使用

<block v-for="(article, index) in articles" :key="index">

<card-article :item="article"/>

</block>

使用文章卡片组件简化首页代码：pages/index/index.vue

<template>

<view>

<block v-for="(article, index) in articles" :key="index">

<card-article :item="article"/>

</block>

</view>

</template>

<script>

import CardArticle from '@/components/card/CardArticle.vue';

export default {

components:{

CardArticle,

},

data() {

return {

// 文章列表

articles: [

{

id: 1,

author: '张大鹏', // 昵称

avatar: '/static/tabbar/home.png', // 头像

title: '我的标题111', // 标题

pub_date: '2022-10-10 下午 03:33', // 发布时间

img: '/static/demo/datapic/11.jpg', // 封面图片

good_num: 333, // 支持数量

bad_num: 3, // 反对数量

comment_num: 33, // 评论数量

share_num: 33, // 分享数量

is_follow: false, // 是否关注

support_type: 'good' // 支持类型: good/bad，为空则还没有表态

},

{

id: 2,

author: '张大鹏2', // 昵称

avatar: '/static/tabbar/home.png', // 头像

title: '我的标题222', // 标题

pub_date: '2022-10-10 下午 03:33', // 发布时间

img: '/static/demo/datapic/11.jpg', // 封面图片

good_num: 333, // 支持数量

bad_num: 3, // 反对数量

comment_num: 33, // 评论数量

share_num: 33, // 分享数量

is_follow: false, // 是否关注

support_type: 'good' // 支持类型: good/bad，为空则还没有表态

},

]

};

},

methods: {}

};

</script>

<style>

</style>

此时页面的渲染效果如下：

文中所有代码，只需要打赏20元，然后留言评论"已打赏"，即可免费获取哦。

写文章不容易，不喜勿喷哈，如果有想要学编程，学项目，或者在工作中有项目难以单独完成需要提供帮助的同学，欢迎私信我哈。生活不易，想要利用学到的编程知识，业余赚点零花钱。

谢谢您！！！

「点点赞赏，手留余香」

赞赏

  • layis88
  • EXO不娘就怪了
  • 黄道七宫vDa
  • 3人赞过
3
0
0
反馈
返回列表
评论 0 条 请文明上网，理性发言

相关文章

  • 【uniapp小程序】—— 配置首页搜索框
    本文效果图： 正文 1、查阅官网配置搜索框pages配置项 配置链接：uni-app官网(dcloud.net.cn) 1.1首先进入官网后找到如下内容 1.2如官网所示style的说明如下，看图操作 用于设置每个页面的状态栏、导航条、标题、窗口背景色等。 页面中配置项会覆盖globalStyle中相同的配置项.
    hi丶尛檌 8 6 0 条评论
  • uniapp开发环境搭建
    一、下载并安装开发工具 uniapp的开发工具为HbuilderX，下载地址为：去下载 这里选择windows版本。windows版本下载完成之后会得到一个zip的压缩包文件，解压完成即可使用，是不需要安装的绿色版本。 二、安装sass和scss插件 打开HbuilderX，点击工具----插件安装，如图所示： 在
    簇氖鹊徘 7 3 0 条评论
  • 用uniapp开发一个新闻小程序
    成果 准备cnblogsAPIKEY申请：https://oauth.cnblogs.com/ api接口文档：https://api.cnblogs.com/help 开发工具微信开发者工具 [uniapp官方编辑器](https://www.dcloud.io/hbuilderx.html) 学习路线没有接触过V
    ababcdy 7 3 0 条评论
  • WTMPlus 1.4 Uniapp来了
    1.4版本 前后台模式切换 用户现在可以自由切换前后台设计模式，在前台模式下，加入了新的信息列表控件，用于展示移动端常见的下拉刷新上拉分页的列表。其他控件，包括各种图表控件也都可以在前台模式中使用。 在线预览移动端效果 如果在项目中维护了移动端的页面，那么当你预览的时候，会同时生成后台系统和前台移动端的预览环境，用户
    鈽倄cs9 5 0 0 条评论
  • 【uniapp小程序】—— APP项目云打包（安卓）
    第一步：查看自己的项目的基础配置 第二步：选择打包项目 选中我们要打包的项目 方式一：可以右键我们我们的项目目录-》发行-》原生APP-云打包 方式二：点开当前项目，点击HbuildX上方菜单栏-》发行-》原生APP-云打包 第三步：打包界面选项 选择完我们要打包的项目之后会弹出一个打包配置选项界面。 因为我们打包的
    ganqchund475 8 1 0 条评论
  • uni-app黑魔法：小程序自定义组件运行到H5平台
    平台分裂，为不同平台编写相同的业务代码，是件无趣的事情。 有追求的程序员，一直在探索代码复用的方案，HybridApp即是代表。 1、基于跨端框架，从头开发，一套代码，发行多个平台，比如DCloud出品的uni-app、京东凹凸实验室的taro。 在这段并行的时间内，开发者需要同时维护微信原生、uni-app两个版本
    爱笑的田中未央 5 6 0 条评论
  • uni-app 简介
    uni-app简介 官网：https://uniapp.dcloud.io/ 01 1.uni-app是什么？ 01 02 那么哪里可以体现uni-app可以实现"一套代码，多端发行"呢？从常用的uni-app开发工具HBuilder可以看出该特点。 02 2.为什么选择uni-app？（uni-app的优点） 兼容
    sinbaranny 4 5 0 条评论
  • uni-app基础教程 环境配置【uniapp 专题 01】
    "作者：坚果 2.uni-app功能框架一图胜千言 img3.uni-app创建项目的两种方式uni-app支持通过可视化界面、vue-cli命令行两种方式快速创建项目。 1.可视化界面可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。 开始之前，开发者需先下载安装如下工具： HB
    tuoyeitu77 3 3 0 条评论
  • uni-app跨端开发H5、小程序、IOS、Android（二）：HBuilderX使用技巧
    各种福利第一时间送达！ 大家好，我是黑马腾云。 为了反馈朋友们长期的支持，接下来几天会有很多福利，敬请期待！ 前几天，不少读者私信咨询前文中项目案例的种种实现细节，本文先揭晓使用的开发工具。 特别说明：系列文章定位是帮助初学者从入门到实战，适合零基础或基础较差uni-apper。为了节约时间，高手勿进，可关注后续的实战
    穿越火线—0 5 3 0 条评论
  • 简单uni-app逆向
    0x00背景介绍第一次分析uni-app框架的apk，顺手记录一下过程。在分析过程中涉及到uni-app和mui框架，下面简单介绍一下背景。 mui，也是Dcloud官方推出的一个基于html5+标准的框架，同时拥有h5组件和原生组件，号称最接近原生APP体验的高性能前端框架，官网：https://dev.dcloud
    们酮供碱梭 5 0 0 条评论
Copyright ©2012-2024 Z70.cc
粤ICP备2022084731号 | 关于我们 | 联系我们 | 隐私保护