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

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

目录

一.效果图

二.页面代码

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

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

相关推荐
ggdpzhk34 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
中云DDoS CC防护蔡蔡36 分钟前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
井眼4 小时前
微信小程序-prettier 格式化
微信小程序·小程序
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app