当前位置：首页 > news >正文

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

news 2025/8/18 7:37:28

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

一.效果图

二.页面代码

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'  }, //其他专栏  ]  }  
});