前言:不管我们要做什么种类的小程序都涉及到宣传或者扩展其他业务,我们就可以制作一个文章专栏的页面,实现点击一个专栏跳转到相应的页面,页面可以有科普类的知识或者其他,然后页面下方可以自由发挥,添加联系方式等等。
目录
[2.1 WXML](#2.1 WXML)
[2.2 WXSS](#2.2 WXSS)
[2.3 JS](#2.3 JS)
一.效果图
二.页面代码
2.1 WXML
html
<!--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
html
.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
html
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'
},
//其他专栏
]
}
});
看到这里,你是否有所收获呢,创作不易,点赞+关注+留言支持一下叭~,还会发布更多文章哦~