浅写个登录(无js文件)

全部代码如下,无需编写wxss文件,渲染都在style里面:

<view style="height: 250rpx;width: 100%;">
<!-- 背景图片 --><view style="position: absolute; background-color: antiquewhite; height: 250rpx;width: 100%;z-index: -1;overflow: hidden;"><swiper autoplay="true" interval="0" duration="10000" 	circular="true" easing-function="linear"><block wx:for="{{2}}"><swiper-item style="background-color: rgb(228, 238, 228);"><image  style="width: 110%;height: 100%;" src="https://636c-cloud1-4gzpqujd5b0e2119-1312669530.tcb.qcloud.la/toux/zs.png?sign=dd880cfa59a198c3eca3916dac26d0c5&t=1713357078" alt="scaleToFill"></image></swiper-item></block></swiper>
</view>  <!-- 未登录 --><view wx:if="{{0}}" style="height: 100%;width: 100%;justify-items: center;display: flex;flex-direction: column;"><view style="height: 70%;width: 100%; display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 70rpx;"><view style="width: 100%;height: 100%;display: flex;"><view bindtap="closeTank" style=" width: 20%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;"><view style="width: 150rpx;height: 150rpx;"><image src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0" style=" width: 100%;height: 100%;border-radius: 50%;border-style: solid;border-color: rgb(68, 63, 63);border-width: 5rpx;"></image></view></view><view bindtap="closeTank" style="height: 100%; width: 50%; display: flex;flex-direction: column;justify-content: center; margin-left: 25rpx;"><view><text style=" font-size: 55rpx;border-color: black;border-width:0rpx 0rpx 10rpx 0rpx;border-style: solid;">点击登录</text></view></view></view></view><view style="border-width: 3rpx 0rpx 0rpx 0rpx;border-style: solid;border-color: black; height: 30%;width: 100%;display: flex;flex-direction: column;align-items:flex-end;justify-content: center;"><view style="margin-right: 60rpx;"><text style="font-size: 30rpx;font-weight: 800;border-color: black;border-width:0rpx 0rpx 5rpx 0rpx;border-style: solid;">"字如其人,书如其心。"</text></view></view></view><!-- 已经登录 --><view  wx:else style=" height: 100%;width: 100%;justify-items: center;display: flex;border-color: rgb(180, 226, 240);border-width:0rpx 0rpx 8rpx 0rpx;border-style: solid;"><!-- 左边的字 --><view style="width: 40%;height: 100%;"><view style="height: 100%;width: 100%; display: flex;flex-direction: column;align-items: center;justify-content: center;"><view style="width: 90%;"><text style="border-width: 0rpx 0rpx 5rpx 0rpx;border-style: solid;border-color: black;">"字如其人</text></view><view style="width: 90%;text-align: right;margin-top: 8rpx;"><text style="border-width: 0rpx 0rpx 5rpx 0rpx;border-style: solid;border-color: black;">书如其心。"</text></view></view></view><!-- 头像昵称 --><view style="width: 60%;height: 100%;display: flex;"><!-- 头像 --><view style="width: 50%;height: 100%;display: flex; flex-direction: column;  align-items: center;justify-content: center;"><view style="width: 200rpx;height: 200rpx;"><image src="https://636c-cloud1-4gzpqujd5b0e2119-1312669530.tcb.qcloud.la/toux/opqPg5CED1jRbNp8IDXLPpfGqi8c.png?sign=5d1afdef665c200ce374f54a9079348c&t=1713278253" style="  width: 100%;height: 100%;border-radius: 50%;border: rgb(124, 211, 245) solid 5rpx;"></image></view></view><!-- 昵称 --><view style="width: 50%;height: 100%;"><view style="width: 100%;height: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;"><view style=" width: 95%;height: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;line-height:200%;font-weight: 700;">吼吼吼吼吼吼吼吼吼吼吼吼</view></view><view style="width: 100%;height: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;" bindtap="tuichu"><view style="border: 5rpx solid black;"><text class="tuichu" style="font-weight: 700;font-size: 40rpx;color: black;">退出登录</text></view></view></view></view></view>
</view>

大致样式如下:

登录前:

登录前视频icon-default.png?t=N7T8https://636c-cloud1-4gzpqujd5b0e2119-1312669530.tcb.qcloud.la/toux/1.mp4?sign=b5ba48a18bbfc300f1fa0d17deb37eae&t=1713359595

登陆后:

登陆后视频icon-default.png?t=N7T8https://636c-cloud1-4gzpqujd5b0e2119-1312669530.tcb.qcloud.la/toux/2.mp4?sign=426584bb3c44154bca12e09d5e03e530&t=1713359714​​​​​​​​​​​​​​​​​​​​​

代码详解,本人将从背景图片,未登录和已经登录两部分进行介绍【wx:if自己写函数判断真假,】。

背景图片详解【原理是轮播图】

未登录详解:

【用户点击事件的绑定和灰色头像的图片更改】

登陆后详解

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

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

相关文章

代码随想录-算法训练营day16【二叉树03:二叉树的最大深度、二叉树的最小深度、完全二叉树的节点个数】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第六章 二叉树part03今日内容&#xff1a; ● 104.二叉树的最大深度 559.n叉树的最大深度 ● 111.二叉树的最小深度 ● 222.完全二叉树的节点个数迭代法&#xff0c;大家可以直接过&#xff0c;二刷有精力的时候 再去…

IDEA中Docker相关操作的使用教程

一、引言 Docker作为当前最流行的容器化技术&#xff0c;极大地简化了应用的部署和管理。而IntelliJ IDEA作为一款强大的集成开发环境&#xff0c;也提供了对Docker的集成支持。本文将介绍如何在IDEA中配置和使用Docker&#xff0c;包括远程访问配置、服务连接、Dockerfile编写…

【C语言】冒泡排序算法详解

目录 一、算法原理二、算法分析时间复杂度空间复杂度稳定性 三、C语言实现四、Python实现 冒泡排序&#xff08;Bubble Sort&#xff09;是一种基础的排序算法。它重复地遍历要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果他们的顺序错误就把他们交换过来。遍历数列…

Go读取文件n行的思路之旅

【问题】最近想在一个10G的文件上读取最后100行数据&#xff0c;用了多种方式去实现&#xff0c;发现还是逆向读取比较香一点 【方法】分别尝试了两种方式&#xff1a;双端队列和逆读文件   在这里我就直接把结论放在文章前面 双端队列&#xff1a;适用于文件数据不大的情况…

微信小程序开发笔记

微信小程序开发笔记 1 微信小程序的项目结构 2 页面组成 一个微信小程序是由一个或多个页面组成的&#xff0c;这些页面被存放在pages目录中。下面以pages 目录下的index页面为例展示其组成部分&#xff0c;index页面的组成部分如下图所示。 由上图可知&#xff0c;index页面…

hbase-2.2.7分布式搭建

一、下载上传解压 1.在官网或者云镜像网站下载jar包 华为云镜像站&#xff1a;Index of apache-local/hbase/2.2.7 2.上传到linux并解压 tar -zxvf hbase-2.2.7-bin.tar.gz -C /usr/locol/soft 二、配置环境变量 1. vim /etc/profile export HBASE_HOME/usr/local/soft/h…

教授 Avi Wigderson荣获2023年图灵奖

2023年图灵奖&#xff0c;最近刚刚颁给普林斯顿数学教授 Avi Wigderson&#xff01;作为理论计算机科学领域的领军人物&#xff0c;他对于理解计算中的随机性和伪随机性的作用&#xff0c;作出了开创性贡献。 Avi Wigderson因其在计算复杂性理论、随机性与算法等领域的开创性贡…

【数据结构】二分查找

1.概念 二分查找&#xff08;Binary Search&#xff09;是一种高效的查找算法&#xff0c;它在一个有序数组中查找特定的元素。二分查找的工作原理是不断将数组分成两半&#xff0c;比较中间元素与目标值&#xff0c;根据比较结果选择左半部分或右半部分继续查找&#xff0c;直…

前端三剑客 HTML+CSS+JavaScript ② HTML相关概念

他们这样形容我 是暴雨浇不灭的火 —— 24.4.18 学习目标 理解 HTML的概念 HTML的分类 HTML的关系 HTML的语义化 应用 HTML骨架格式 sublime基本使用 一、HTML初识 HTML指的是超文本标记语言&#xff0c;是用来描述网页的一种语言 超文本&#xff1a;暂且理解为“超级的文本”&…

【opencv】dnn示例-segmentation.cpp 通过深度学习模型对图像进行实时语义分割

模型下载地址&#xff1a; http://dl.caffe.berkeleyvision.org/ 配置文件下载&#xff1a; https://github.com/opencv/opencv_extra/tree/4.x/testdata/dnn 该段代码是一个利用深度学习进行语义分割的OpenCV应用实例。下面将详细解释代码的功能和方法。 引入库 引入了一些必要…

PyTorch转ScriptModule的问题记录

文章目录 本文记录了转ScriptModule时遇到的一系列问题如何转ScriptModule?遇到的坑Expected a value of type Tensor for argument self but instead found type Optional[Tensor].Expected integer literal for index but got a variable or non-integer. ModuleList/Sequen…

(最详细)关于List和Set的区别与应用

关于List与Set的区别 List和Set都继承自Collection接口&#xff1b; List接口的实现类有三个&#xff1a;LinkedList、ArrayList、Vector。Set接口的实现类有两个&#xff1a;HashSet(底层由HashMap实现)、LinkedHashSet。 在List中&#xff0c;List.add()是基于数组的形式来添…

内部类

一.概念 当一个事物内部&#xff0c;还有一个部分需要一个完整的结构进行描述&#xff0c;而这个内部的完整的结构又只为外部事物提供服务&#xff0c;那么将这个内部的完整结构最好使用内部类。在Java中&#xff0c;可以将一个类定义在另一个类或者一个方法内部&#xff0c;前…

记录OCEAN报错信息和对应解决方案

记录OCEAN代码报错信息和对应我代码部分解决方案 Error fprintf/sprintf: format spec. incompatible with data - “Format is ‘GBW IS %e\n’, argument #1 is nil”使用gainBwProd()测得GBW返回值为nil&#xff0c;导致printf出错添加检测代码 if(GBW nil printf("GB…

将gdip-yolo集成到yolov9模型项目中(支持预训练的yolov9模型)

1、yolov9模型概述 1.1 yolov9 YOLOv9意味着实时目标检测的重大进步&#xff0c;引入了可编程梯度信息&#xff08;PGI&#xff09;和通用高效层聚合网络&#xff08;GELAN&#xff09;等开创性技术。该模型在效率、准确性和适应性方面取得了显著改进&#xff0c;在MS COCO数…

GNU Radio使用Python Block实现模块运行时间间隔获取

文章目录 前言一、timestamp_sender 模块二、timestamp_receiver 模块三、测试 前言 GNU Radio 中没有实现测量两个模块之间的时间测量模块&#xff0c;本文记录一下通过 python block 制作一个很简单的测时 block。 一、timestamp_sender 模块 使用 python block 做一个发送…

【python】super()函数的用法详解!

今天分享一个我在实际项目中用到过的super()函数&#xff0c;来说说该函数的主要功能是什么&#xff0c;简单来说&#xff0c;super()函数是用来做调用父类的一个方法。 super() 是用来解决多重继承问题的&#xff0c;直接用类名调用父类方法在使用单继承的时候没问题&#xf…

外包干了30天,技术倒退明显

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近6年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落&#xff01; 而我已经在一个企业干了四年的功能…

设计模式学习笔记 - 开源实战二(上):从Unix开源开发学习应对大型复杂项目开发

概述 软件开发的难度无外部两点&#xff0c;一是技术男&#xff0c;代码量不一定多&#xff0c;但要解决的问题比较难&#xff0c;需要用到一些比较深的技术解决方案或者算法&#xff0c;不是靠 “堆人” 就能搞定的&#xff0c;比如自动驾驶、图像识别、高性能消息队列等&…

【详细的Kylin使用心得】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…