做配资网站多少钱,有创意的设计作品,有哪些做兼职的设计网站,wap网站还有能打开的吗前言#xff1a;不管我们要做什么种类的小程序都涉及到宣传或者扩展其他业务#xff0c;我们就可以制作一个文章专栏的页面#xff0c;实现点击一个专栏跳转到相应的页面#xff0c;页面可以有科普类的知识或者其他#xff0c;然后页面下方可以自由发挥#xff0c;添加联… 前言不管我们要做什么种类的小程序都涉及到宣传或者扩展其他业务我们就可以制作一个文章专栏的页面实现点击一个专栏跳转到相应的页面页面可以有科普类的知识或者其他然后页面下方可以自由发挥添加联系方式等等。 目录
一.效果图
二.页面代码
2.1 WXML
2.2 WXSS
2.3 JS 一.效果图 二.页面代码
2.1 WXML
!--pages/type/type.wxml--
view classcontainer view classcolumn wx:for{{columns}} wx:keyindex image classcolumn-image src{{item.imageSrc}} modeaspectFill/image text classcolumn-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 }, //其他专栏 ] }
}); 看到这里你是否有所收获呢创作不易点赞关注留言支持一下叭~还会发布更多文章哦~
