微信小程序首页、界面布局、功能简洁(示例三)

微信小程序首页界面布局、页面简洁,功能简单

首页简洁布局示例
直接上具体代码:
1、js代码

Page({/*** 页面的初始数据*/data: {imgList: ['../../images/demo.jpg', '../../images/demo.jpg', '../../images/demo.jpg'],navList: [{'src': '../../images/nav1.png','title': '菜单一'},{'src': '../../images/nav2.png','title': '菜单二'},{'src': '../../images/nav3.png','title': '菜单三'},{'src': '../../images/nav4.png','title': '菜单四'},],dataList: [{'coverUrl': '../../images/demo.jpg','label': '推荐','title': '纯属示例数据呦~','date': '2023年1月23日','brand': '点赞','price': '2.98'},{'coverUrl': '../../images/demo.jpg','label': '经典','title': '点赞收藏加关注,下次还能找到呦~','date': '2023年1月23日','brand': '收藏','price': '1.98'},{'coverUrl': '../../images/demo.jpg','label': '模板','title': '不定期发布各种示例模板,进我主页,查看更多示例内容呦~','date': '2023年1月23日','brand': '关注','price': '0.98'},]},// 菜单navClick(e) {wx.showToast({title: '您点击了【' + e.currentTarget.dataset.item.title + '】',})},// 详情detailClick(e) {wx.showToast({title: e.currentTarget.dataset.item.title,})},
})

2、wxml代码

<!-- 轮播图 -->
<swiper class="margin" indicator-dots="true" autoplay="true" interval="2000" duration="500" indicator-color="gray" indicator-active-color="white"><block wx:for="{{imgList}}" wx:for-index="index" wx:for-item="item" wx:key="item"><swiper-item><image src="{{item}}" mode="widthFix"></image></swiper-item></block>
</swiper>
<!-- 菜单栏 -->
<view class="nav-box"><block wx:for="{{navList}}" wx:for-index="index" wx:for-item="item" wx:key="item"><view class="nav" bind:tap="navClick" data-item="{{item}}"><image src="{{item.src}}" mode="widthFix"></image><text>{{item.title}}</text></view></block>
</view>
<!-- 列表数据 -->
<view class="box"><view class="list-title">示例数据</view><scroll-view scroll-y="true" show-scrollbar="{{false}}" enhanced="{{true}}"><block wx:for="{{dataList}}" wx:for-index="index" wx:for-item="item" wx:key="item"><view class="level row" bind:tap="detailClick" data-item="{{item}}"><view class="left-img"><image src="{{item.coverUrl}}"></image></view><view class="right-info"><view><view class="right-title"><text class="car-dot">{{item.label}}</text>{{item.title}}</view><view class="right-gray">{{item.date}}</view></view><view class="level right-bot"><view>{{item.brand}}</view><view>{{item.price}} 元</view></view></view></view></block><view class="no-more">我是有底线的呦~</view></scroll-view>
</view>

3、wxss代码

page {background-color: #f1f1f1;
}/* 轮播图 */
.margin {margin: 20rpx;
}swiper-item {border-radius: 20rpx;
}swiper-item image {width: 100%;
}/* 菜单栏 */
.nav-box {display: flex;flex-direction: row;align-items: center;margin: 20rpx 0;
}.nav {display: flex;flex-direction: column;align-items: center;flex: 1;
}.nav image {width: 40%;background-color: white;border-radius: 20rpx;padding: 15rpx;
}.nav text {margin-top: 15rpx;font-size: 30rpx;
}/* 列表信息 */
.box {margin: 20rpx;
}.list-title {margin: 0 10rpx;font-size: 30rpx;font-weight: bold;
}.level {display: flex;flex-direction: row;
}.row {margin-top: 20rpx;background-color: #fff;padding: 10rpx;border-radius: 10rpx;min-height: 200rpx;
}.left-img {width: 45%;
}.left-img image {width: 100%;border-radius: 5rpx;max-height: 200rpx;
}.right-info {width: 55%;display: flex;padding-left: 15rpx;flex-direction: column;justify-content: space-between;
}.right-title {font-size: 30rpx;display: -webkit-box;word-break: break-all;text-overflow: ellipsis;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
}.right-gray {font-size: 28rpx;color: #909399;margin-top: 5rpx;display: -webkit-box;word-break: break-all;text-overflow: ellipsis;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 1;
}.car-dot {font-size: 20rpx;background-color: #f29100;margin-right: 10rpx;padding: 2rpx 5rpx;color: white;
}.right-bot {align-items: center;justify-content: space-between;
}.right-bot view:nth-child(1) {font-size: 28rpx;
}.right-bot view:nth-child(2) {color: #fa3534;font-size: 30rpx;font-weight: bold;
}.no-more {text-align: center;padding: 20rpx 0;font-size: 26rpx;color: #909399;
}

4、json代码

{"usingComponents": {},"navigationBarTitleText": "首页简洁布局示例"
}

界面中包含的图片地址可自行修改。页面布局简洁,功能简单,没有写具体的监听事件,只是简单的将监听进行了绑定,如需要具体的监听功能事件,需要根据自己的需求进行修改呦,如需更多示例,进我主页呦~,如需没有合适的demo,请留言,有空就发。写的不好,请多包涵。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/641621.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IntelliJ IDEA 快捷键大全

IntelliJ IDEA 快捷键大全 一、文本编辑二、构建、编译项目 一、文本编辑 CtrlN 查找类 CtrlN 查找文件 CtrlF 查找文本 可以根据需求去选择红框内的选项 CtrlX 剪切 剪切选中文本&#xff0c;如果未选中则剪切当前行CtrlC 复制 复制选中文本&#xff0c;如果未选中则复制当前…

WEB前端递归数组模块详解

<!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><script>function fn(n){for(let i 0; i< n; i){for(let j 0; j < n; j){console.log(i)}}}//递归函数&#xff1a;…

机器学习工程师在人工智能时代的角色

机器学习工程师在人工智能时代的角色 在当今的数字时代&#xff0c;人工智能&#xff08;AI&#xff09;已成为许多行业不可或缺的一部分。从流程自动化到增强客户体验&#xff0c;人工智能具有改变企业的巨大潜力。这一变革性技术的核心是机器学习&#xff0c;该领域专注于开…

【Flink-1.17-教程】-【四】Flink DataStream API(3)转换算子(Transformation)【用户自定义函数(UDF)】

【Flink-1.17-教程】-【四】Flink DataStream API&#xff08;3&#xff09;转换算子&#xff08;Transformation&#xff09;【用户自定义函数&#xff08;UDF&#xff09;】 1&#xff09;函数类&#xff08;Function Classes&#xff09;2&#xff09;富函数类&#xff08;R…

智慧工厂视频监控平台EasyCVR公网收流后内网设备无法播放是什么原因?

安防视频监控平台EasyCVR采用了开放式的网络结构&#xff0c;支持高清视频的接入和传输、分发&#xff0c;平台提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;此外&am…

如何在科技创新中发挥国有企业的战略支撑作用?

要在科技创新中发挥国有企业的战略支撑作用&#xff0c;需要采取以下措施&#xff1a; 1. 强化国有企业创新主体地位&#xff1a;鼓励和支持国有企业加强技术创新、产品创新、组织创新和市场创新&#xff0c;提高自主创新能力。政府可以给予国有企业一定的政策和资金支持&…

机器学习分类模型评价指标总结(准确率、精确率、召回率、Fmax、TPR、FPR、ROC曲线、PR曲线,AUC,AUPR)

为了看懂论文&#xff0c;不得不先学一些预备知识&#xff08;&#xff08;55555 主要概念 解释见图 TP、FP、TN、FN 准确率、精确率&#xff08;查准率&#xff09;、召回率&#xff08;查全率&#xff09; 真阳性率TPR、伪阳性率FPR F1-score2TP/(2*TPFPFN) 最大响应分…

netty源码:(46) TailContext

TailContext是DefaultChannelPipeline中的一个内部类&#xff0c;它是一个ChannelInboundHandler TailContext在我们所添加的自己定义的所有ChannelInboundHandler(比如通过addLast方法&#xff09;之后&#xff0c;是整个入栈消息处理的最后一环&#xff0c;也就是tail. 它的…

Django 手把手教你搭建MYSQL多数据源 实现读写分离

目录 一、创建3.2版本的Django项目 二、配置MYSQL多数据源 三、实现读写分离 一、创建3.2版本的Django项目 第一步&#xff1a;创建虚拟环境 第二步&#xff1a;打开终端安装django pip install django3.2 第三步&#xff1a;创建项目 django-admin startproject django_…

windows用msvc编译opencv、opencv-python、opencv_contrib、cuda

如要用mingw编译opencv&#xff0c;参考我另外一篇文章https://blog.csdn.net/weixin_44733606/article/details/135741806。 如要用Ubuntu编译opencv&#xff0c;参考我另外一篇文章https://blog.csdn.net/weixin_44733606/article/details/131720128。 一、安装VS2022&…

实现组件动画的时候报这个错误

vue3 Component inside &#xff1c;Transition&#xff1e; renders non-element root node that cannot be animated. 然后怎么解决的,在template元素里面放了多个节点所以报这个错误,我们先写一个div里面写就可以解决 <template><div><el-card>123</…

夜视成像应用激光照明方法

在夜视成像领域&#xff0c;激光照明的使用主要集中在提高成像质量和远距离观察上。 以下是几种用于夜视成像的激光照明方法&#xff1a; 直接激光照明&#xff1a; 这种方法涉及直接用激光光束照射目标。激光器发出的光束可以是可见光或红外光&#xff0c;具体取决于应用需求和…

elastic search入门

参考1&#xff1a;Elastic Search 入门 - 知乎 参考2&#xff1a;Ubuntu上安装ElasticSearch_ubuntu elasticsearch-CSDN博客 1、ElasticSearch安装 1.1安装JDK&#xff0c;省略&#xff0c;之前已安装过 1.2创建ES用户 创建用户&#xff1a;sudo useradd esuser 设置密码&…

仿真机器人-深度学习CV和激光雷达感知(项目2)day03【机器人简介与ROS基础】

文章目录 前言机器人简介机器人应用与前景机器人形态机器人的构成 ROS基础ROS的作用和特点ROS的运行机制ROS常用命令 前言 &#x1f4ab;你好&#xff0c;我是辰chen&#xff0c;本文旨在准备考研复试或就业 &#x1f4ab;本文内容是我为复试准备的第二个项目 &#x1f4ab;欢迎…

java实现时间轮算法

Main demo测试代码 public class Main {static int inCount 0;static int runCount 0;public static void main(String[] args) {CountDownLatch countDownLatch new CountDownLatch(1000);Timer timer new Timer();for(int i1;i<1000;i){TimerTask timerTask new Ti…

【vue3】GSAP在vue中的使用

一、获取GSAP npm install gsap 二、开始GSAP 导入GSAP&#xff0c;如果需要导入gsap的插件可以参考这里。 import gasp from gsap; 这里用的是选项式&#xff0c;在methods属性中创建一个方法用来写gsap的动画。 gasp_animation(){let tl gasp.timeline({defaults:{ ease:&…

【zlm】针对单个设备的码率的设置

目录 代码修改 实验数据一 实验数据二 同时拉一路视频后 修改记录 使用方法 代码修改 要被子类引用 &#xff0c;所以放在protected 不能放private 下面的结论&#xff0c;可以在下面的实验数据里引用。“同时拉一路视频后” 实验数据一 https://10.60.3.45:10443/index…

【学习】双线性插值

双线性插值公式 对于一个目的像素&#xff0c;设置坐标通过反向变换得到的浮点坐标为(iu,jv) (其中i、j均为浮点坐标的整数部分&#xff0c;u、v为浮点坐标的小数部分&#xff0c;是取值[0,1)区间的浮点数)&#xff0c;则这个像素得值 f(iu,jv) 可由原图像中坐标为 (i,j)、(i1…

php学习

php基础语法 一 php程序 1.php标记 开始标记<?php 和结束标记 ?>中间写 PHP 代码 当解析一个文件时&#xff0c;PHP 会寻找起始和结束标记&#xff0c;也就是告诉php 开始和停止解析二者之间的代码。此种解析方式使得PHP 可以被嵌入到各种不同的文档中去&#xff…

使用PSIM软件生成DSP28335流水灯程序

最近在学习DSP28335芯片&#xff0c;然后在使用PSIM仿真软件时发现这个仿真软件也支持28335芯片&#xff0c;于是就想学习下如何在PSIM软件中使用DSP28335芯片。在PSIM自带的官方示例中有使用DSP28335芯片的相关例子。 工程下载链接 https://download.csdn.net/download/qq_20…