微信小程序demo-----制作文章专栏

前言:不管我们要做什么种类的小程序都涉及到宣传或者扩展其他业务,我们就可以制作一个文章专栏的页面,实现点击一个专栏跳转到相应的页面,页面可以有科普类的知识或者其他,然后页面下方可以自由发挥,添加联系方式等等。

目录

一.效果图

二.页面代码 

2.1 WXML

2.2 WXSS 

2.3 JS 


 

一.效果图

二.页面代码 

2.1 WXML

<!--pages/type/type.wxml-->
<view class="container">  <view class="column" wx:for="{{columns}}" wx:key="index">  <image class="column-image" src="{{item.imageSrc}}" mode="aspectFill"></image>  <text class="column-title">{{item.title}}</text>  </view>  
</view>

2.2 WXSS 

.container {  display: flex;  flex-wrap: wrap;  justify-content: space-between;  padding: 10px;  
}  .column {  height:300rpx;width: 92%; /* 根据需要调整列宽 */  margin-bottom: 20px; /* 根据需要调整列间距 */  background-color: #fff;  border-radius: 10px;  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  overflow: hidden;  position: relative;  
}  .column-image {  width: 100%;  height: 100px;  padding-bottom: 100%; /* 保持宽高比1:1 */  background-size: cover;  background-position: center;  
}  .column-title {  position: absolute;  bottom: 10px;  left: 10px;  right: 10px;  background-color: rgba(0, 0, 0, 0.5);  color: #fff;  text-align: center;  padding: 5px;  border-radius: 5px;  
}

2.3 JS 

Page({  data: {  columns: [  {  title: '计算机与软件技术系',  imageSrc: './png/zszl.png'  },  {  title: '数字艺术系',  imageSrc: './png/zszl.png'  },  {  title: '经济管理系',  imageSrc: './png/zszl.png'  },  {  title: '电子与通信技术系',  imageSrc: './png/zszl.png'  }, {  title: '机电技术系',  imageSrc: './png/zszl.png'  }, //其他专栏  ]  }  
});

  看到这里,你是否有所收获呢,创作不易,点赞+关注+留言支持一下叭~,还会发布更多文章哦~

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3003925.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

详细设计(上)

结构程序化 三种基本控制结构 其他常用控制结构 人机界面设计 三条“黄金规则” 1、置用户于控制之下 2、减少用户记忆负担 3、保持界面一致 设计问题 设计人机界面过程中会遇到的4个问题&#xff1a; 1、系统响应时间 2、用户帮助设施 3、出错信息处理 4、命令交互 设计过…

蓝桥杯单片机省赛——第八届“基于单片机的电子钟程序设计与调试”程序部分

往期回顾 第三届蓝桥杯单片机省赛 第四届蓝桥杯单片机省赛 第五届蓝桥杯单片机省赛 第六届蓝桥杯单片机省赛 第七届蓝桥杯单片机省赛 文章目录 往期回顾一、前期准备二、代码详情1.基础代码蜂鸣器/继电器/led/定时器之类的代码 2.按键详解按键写法讲解 3.驱动的处理驱动写法讲…

由于找不到mfc140u.dll,无法继续执行的多种解决方法

在我们日常与计算机的密切互动中&#xff0c;或许不少用户都曾遇到过这样一个棘手的问题&#xff1a;系统突然弹出一个提示窗口&#xff0c;告知我们“找不到mfc140u.dll文件”。这个文件是Microsoft Foundation Class&#xff08;MFC&#xff09;库的一部分&#xff0c;用于支…

导数之光:探寻机器学习中的微变奥秘

在当今这个数据驱动的时代&#xff0c;机器学习以其强大的学习和预测能力&#xff0c;成为了推动科技进步的重要力量。而在机器学习的背后&#xff0c;数学原理&#xff0c;尤其是导数的应用&#xff0c;为其提供了坚实的理论支撑。本文将详细探讨导数在机器学习中的体现&#…

AgentScope: A Flexible yet Robust Multi-Agent Platform

# 文章推荐 # 文章名称&#xff1a;AgentScope: A Flexible yet Robust Multi-Agent Platform 文章链接&#xff1a;https://arxiv.org/pdf/2402.14034.pdf github链接&#xff1a;https://github.com/modelscope/agentscope 概述 这篇文章介绍了在多智能体系统中所面临的…

抖音小店运营实战班,全新升级 从零到进阶精通 分享月销百万小店核心秘密

课程内容&#xff1a; 1 2024抖音电商发展趋势及抖店运营策略(直播2024 0412).mp4 2 1-1抖音小店入驻流程(直播2024 04 12),mp4 3 1-2个体店铺VS企业店铺有什么区别(直播20240412).mp4 4 1-3抖音小店店铺搭建(直播2024 04 12).mp4 5 2-1-如何避免违禁词(附违禁词大全)(直播…

OpenHarmony实战开发-使用通用事件、触屏事件

触屏事件指当手指/手写笔在组件上按下、滑动、抬起时触发的回调事件。包括点击事件、拖拽事件和触摸事件。 图1 触摸事件原理 点击事件 点击事件是指通过手指或手写笔做出一次完整的按下和抬起动作。当发生点击事件时&#xff0c;会触发以下回调函数&#xff1a; onClick(ev…

智能消费记账|基于SSM+vue的大学生智能消费记账系统(源码+数据库+文档)

智能消费记账目录 基于SSMvue的大学生智能消费记账系统 一、前言 二、系统设计 三、系统功能设计 1 用户列表 2 预算信息管理 3 预算类型管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1…

【深耕 Python】Data Science with Python 数据科学(19)书402页练习题:模型准确率对比研究、KMeans算法的一点探讨

写在前面 关于数据科学环境的建立&#xff0c;可以参考我的博客&#xff1a; 【深耕 Python】Data Science with Python 数据科学&#xff08;1&#xff09;环境搭建 往期数据科学博文一览&#xff1a; 【深耕 Python】Data Science with Python 数据科学&#xff08;2&…

Ant Design助力:实现用户列表的优雅展示与管理

文章目录 概要前端讲解登录组件注册组件用户列表组件 后端讲解连接数据库db.js路由routes.jsexpress应用app.js 启动项目小结 概要 在上一篇博客&#x1f6aa;中&#xff0c;我们已经成功实现了登录注册系统的基本功能。现在&#xff0c;我们将进一步完善系统&#xff0c;实现…

【Schrödinger薛定谔软件使用实战】- 4lyw蛋白实战

文章目录 软件选择1 pretein preparation1.1 import and process注意1.1.1 preprocess可能遇到的问题 1.2 review and modify1.3 refine1.3.1 optimize优化氢键网络1.3.2 minimize 氢原子会进行能量最小化 2 ligand prepare3 生成对接盒子-receptor grid generation3.1 recepto…

Unity SteamVR入门

概述 VR项目现在在当前已经是非常热门的技术&#xff0c;可以给玩家身临其境的感觉&#xff0c;接下来让我们学习这部分的内容吧&#xff01; SteamVR Input SteamVR绑定流程&#xff0c;在Windows窗口的点击SteamVR-input&#xff0c;图1&#xff0c;在这里可以选择你需要绑定…

守护数据安全: 零信任视角下的勒索病毒防范之道

前言 就在近日&#xff0c;鸿海集团旗下半导体设备大厂——京鼎精密科技股份有限公司&#xff08;以下简称“京鼎”&#xff09;遭到了黑客的入侵。黑客在京鼎官网公布信息直接威胁京鼎客户与员工&#xff0c;如果京鼎不支付赎金&#xff0c;客户资料将会被公开&#xff0c;员…

【项目纪实】某国有航空公司人力资源系统诊断咨询项目

公司的人力资源管理问题一直都比较严重&#xff0c;比如人员冗余、员工工作积极性差等问题&#xff0c;虽然经过多次的管理尝试&#xff0c;存在的问题仍然没有缓解。华恒智信人力资源咨询公司的老师特别专业&#xff0c;帮我们系统、全面的诊断了人力资源管理上存在的问题&…

BSP视频教程第30期:UDS ISO14229统一诊断服务CAN总线专题,常用诊断执行流程精讲,干货分享,图文并茂(2024-04-30)

视频教程汇总帖&#xff1a;【学以致用&#xff0c;授人以渔】2024视频教程汇总&#xff0c;DSP第12期&#xff0c;ThreadX第9期&#xff0c;BSP驱动第30期&#xff0c;USB实战第5期&#xff0c;GUI实战第3期&#xff08;2024-04-30&#xff09; - STM32F429 - 硬汉嵌入式论坛 …

目标检测发展概述

前言 本篇文章只是简单介绍一下目标检测这一计算机视觉方向的发展历史&#xff0c;因此重点在于介绍而不是完整阐述各个时期的代表算法&#xff0c;只要能够简单了解到目标检测的发展历史那么本文的目的就达到了。 目标检测的任务 从上图不难看出&#xff0c;目标检测是计算机…

71.网络游戏逆向分析与漏洞攻防-角色与怪物信息的更新-分析并利用角色与怪物创建的数据包

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果 现在的代码都是依据数据包来写的&#xff0c;如果看不懂代码&#xff0c;就说明没看懂数据包…

Kubernetes - Dashboard 配置用户名密码方式登录

Kubernetes - Dashboard 配置用户名密码方式登录 前言&#xff1a; 为了 K8s 集群安全&#xff0c;默认情况下 Dashboard 以 Token的形式登录的&#xff0c;那如果我们想以用户名/密码的方式登录该怎么操作呢&#xff1f;其实只需要我们创建用户并进行 ClusterRoleBinding绑定即…

网站页面设计方案

网站页面设计方案是指对网站首页、频道页、文章页等页面的设计和布局进行统筹规划和实际操作的一系列方案。好的网站设计方案不仅要能够满足用户的使用需求&#xff0c;还要具有视觉美感和品牌形象的凸显。本文将从如何制定网站设计方案方面进行探讨。 1.确定网站定位和目标用户…

Flutter笔记:谈Material状态属性-为什么FlatButton等旧版按钮就废弃了

Flutter笔记 谈Material状态属性-为什么FlatButton等旧版按钮就废弃了 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this artic…