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