uniapp图标切换

2026-09-02

uni-app 点击切换图标

前端代码: <template> <view> <image src="../../static/pari/buxihuan.png" v-show="showUpImg" @click="changeImg"></image> <image src="../../static/pari/dianshubuz.png" v-show="!showUpImg&quo

导航栏图标切换：click事件，hover事件

最近再做一个基于angular6的项目,导航栏需求:1.hover切换图标 2.click切换图标先用jquery实现功能,在在angular组件里面实现. demo如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏图标切换</title> <style> ul{ backgro

说明:本案例的样式基于colorui组件库感兴趣的小伙伴可以看下教程 colorui组件库开发文档或者csdn的文档,顺便再分享下 colorui的群资源最近项目中需要用到滑动切换的效果,自己懒得写就去网上找了下,发现网上的也不靠谱,不是样式错乱就是其他bug,反正到你的电脑上就是各种bug般的存在,刚好趁着过年的时间把这个完整的效果给小伙伴们陈列下我的gitee 效果图组件封装 swiper-tab.vue html <template> <view class="&q

uniapp - 导航切换（样式）

<view class="text-area" v-for="(menu,i) in menus" :key="i" v-show="true"> <view :class="[active_index==i?'red':'green']" :id="i" @click="menuClick"> {{menu.name}} </view&

uni-app 使用 iconfont 图标自定义图标

uni-app 的uni-ui 的 Icon 图标组件,裡面的图标只是移动端常见的图标,对于一些其他需求所要显示的图标,这个是完全不够用.那么怎么办?模仿它的组件,用阿里巴巴图标矢量库的图标,自己定义一个图标组件呀. 一.uni-app 图标组件 1.组件文件m-icon里面有两个文件,一个是m-icon.css文件一个是m-icon.vue文件 2.m-icon.css 3.m-icon.vue 4.使用上面就是uni-app 官网的例子.接下来我们就参考这个自己写一个组件. 二.新建组件

微信小程序踩坑之一【weui-wxss-master单选按钮图标修改思路】

小程序原生所带的weui框架做小程序UI实在太方便了,但是他的一些细微变化也是让开发中碰到不少头疼的问题一直以来单选多选的美化都是设计师重点表达的地方之一而weui-wxss-master中的单选多选样式又写的与众不同,不同与常规的weui添加after伪类来显示不同,他是通过type="success_no_circle"来实现的,所以无论怎么更改icon或icon的after或befor都无效果这里想到一个变通的方法先给icon添加一个外层容器,给该容器添加背景图片来实现在

unity点击按钮换按钮图标

在做项目时,比如声音开关我们涉及到按钮的图标切换. using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using RenderHeads.Media.AVProVideo; public class SoundButton : MonoBehaviour { /// <summary> /// 要设置的图集 /// </summary&g

eclipse左边导航package explorer自动定位

eclipse或myeclipse中右边编辑界面点击左边导航自动定位左导航Package Explorer的右上角有一个黄色双向箭头图标,鼠标移动到上面提示"Link with Editor",按下这个图标后,你在Editor打开任何文件,Package Explorer就会自动定位到这个文件.点击此图标切换自动定位与非自动定位. http://cjhz.iteye.com/blog/936275

runtime MethodSwizzle 实践之奇怪crash : [UIKeyboardLayoutStar release]: message sent to deallocated instance

情景: 使用MethodSwizzle 实现对数组.字典等系统方法的安全校验.显然能达到预期效果,但实际发现当键盘显示的情况下 home app 进入后台,再单击app 图标切换回前台时发生crash : [UIKeyboardLayoutStar release]: message sent to deallocated instance UIKeyboardLayoutStar 是键盘上的布局的视图吧, 整个工程都在ARC下构建,很奇怪,而且必须. 信息: http://hua

移动前端调试方案（Android + Chrome 实现远程调试）

一:背景通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面然后用手机打开要调试的页面刷新页面查看调试结果但是这就存在两个问题在pc浏览器模拟手机可能造成调试不准用手机直接调试又多一步刷新那怎么能达到在pc端修改代码在手机上直接看到修改结果这样的所见即所得的效果呢 chrome做到了二.功能我们先看下最终想要达到的效果上图的左边是pc端的chrome 浏览器, 右边是手机上的chrome 然后可以看到当鼠标移动

chrome://inspect 移动前端调试方案（Android + Chrome 实现远程调试）

一:背景通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面然后用手机打开要调试的页面刷新页面查看调试结果但是这就存在两个问题在pc浏览器模拟手机可能造成调试不准用手机直接调试又多一步刷新那怎么能达到在pc端修改代码在手机上直接看到修改结果这样的所见即所得的效果呢 chrome做到了二.功能我们先看下最终想要达到的效果上图的左边是pc端的chrome浏览器,右边是手机上的chrome 然后可以看到当鼠标移动到某个d

IPhone 设备状态、闪光灯状态

//判断闪光灯状态,修改默认的"CameraFlashOff" 按钮图片.转由 TGCameraFlash.m 控制图标切换 AVCaptureDevice *device = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo]; AVCaptureFlashMode mode = [device flashMode]; if ([device lockForConfiguration:nil])

linux乱码问题:LANG变量的秘诀

对于国内的Linux用户,经常烦恼的一个问题是:系统常常在需要显示中文的时候却显示成了乱码,而由于某些原因,需要英文界面的系统的时候,却苦于系统不能正常输入和显示中文.另外,由于大部分主要Linux发行版都是以英语为主体的,英文界面的系统和应用程序不管在界面的美观程度和稳定程度上都比中文的略好一些,各种奇怪的BUG也要少一些.因此,很多稍微有英语基础的Linux用户都宁愿使用英文界面的系统.但是,矛盾又突现出来:在英文系统下,如何才能正常显示和输入中文呢?有没有两全其美的方案呢?因此,笔者开始探

android zxing自定义界面，点击按钮开关闪光灯

折腾了一天,今天基本把自定义扫描二维码界面实现了,主要碰到的问题是文本过长,要居中并换行,绘制图片,点击切换不同图片,打开或关闭闪关灯,结果发现在一些机型上出现空指针异常,又牵扯到硬件加速问题...参考了网上一下解决办法,记录一下先上一张效果图开发者遇到的问题以及知识点 1.长文本换行与居中处理文字可以使用StaticLayout,本例中用到的构造方法是 public StaticLayout(CharSequence source, TextPaint paint, int width

我想要个pc和手机共有的客户端，就像百度云（iBarn网盘好用）

https://github.com/zhimengzhe/iBarn iBarn网盘是一个基于PHP开发的先进的云存储系统,提供文件的网络备份,同步和分享服务:支持断点续传,秒传等功能:可选择文件下载到本地或者在线收藏:回收站功能防止用户误删数据功能列表:多文件上传,文件断点续传,秒传,上传进度条文件下载,文件夹下载创建文件夹:移动文件文件夹:删除文件文件夹:分享文件文件夹:编辑文件文件夹.搜索功能列表大小图标切换按照文件名称大小上传时间等排序收藏功能分享功能回收站功能官方推荐模块原生支持

Photoshop技能167个经典的Photoshop技巧大全

Photoshop技能167个经典的Photoshop技巧大全学PS基础:Photoshop 技能167个经典的Photoshop技巧大全,如果你是初级阶段的水平,熟读此文并掌握,马上进阶为中级水平.绝对不是广告噢. 1. 快速打开文件双击Photoshop的背景空白处(默认为灰色显示区域)即可打开选择文件的浏览窗口. 2. 随意更换画布颜色选择油漆桶工具并按住Shift点击画布边缘,即可设置画布底色为当前选择的前景色.如果要还原到默认的颜色,设置前景色为25%灰度 (R19

Mac OS温馨提示17：七彩花哨的输入

OSX Mavericks中国的文字输入功能,色于windows,甚至提供了强大的手写输入功能和语音输入功能,而且发展到如今,已经有非常多种第三方输入法支持Mac了. 一.主要的输入法首先说一下支持Mac的各种中文输入法,事实上我认为苹果自己带的输入法,好用的不行,不但输入流畅.还会依据你的输入显示相关小图片,我眼下一直在用. 顺序不分先后,用的话一个就够. 这些输入法有的是支持五笔的,比方百度和FIT QQ输入法for Mac

利用Hierarchy Viewer优化布局

好久没更新博客了,趁着清明来写点什么. 今天来讲下如何使用android中提供的工具优化我们的布局.首先我们写一个最简单的框架布局. <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical&quo

回顾2017系列篇（二）：移动端APP设计趋势

移动端APP在2017年经历了诸多的变化, 人工智能.聊天式的界面.响应式设计.虚拟现实(VR)和增强现实(AR)让设计师不断面临新的挑战.研究表明,用户每天耗费在手机和平板上的平均时长为158分钟,其中127分钟是耗费在各类APP中,可以看出移动端APP的快速发展都是不争的事实,在我们不断吸收新的东西和掌握新的潮流的同时,还需要确认这些设计趋势是否被验证了.以下是2017年移动端产品最有影响力的趋势: 1. 卡片视图随着移动端设备在互联网中的地位越发重要,产品的打磨中,如何使得移动端和桌面端

使用FreeCookies 控制浏览器cookies及修改http响应内容

FreeCookies 插件安装 :您的计算机需要已经安装Fiddler (如未安装,请至官网下载安装 http://docs.telerik.com/fiddler/configure-fiddler/tasks/configurefiddler) :进入Fiddler安装目录下的Scripts目录下,将FreeCookies.dll复制到该目录下 (下载请至:https://github.com/lulianqi/FreeCookies/raw/master/bin/Debug/FreeC

设置QPushbutton按钮背景、鼠标滑过状态、鼠标点击后状态用法

1.1当要设置QPushbutton按钮背景,字体颜色,鼠标滑过状态,鼠标单击后状态时,可以用QSS来设置,具体的代码如下: QPushButton *allSelect = new QPushButton; allSelect->setStyleSheet("QPushButton{border-image: url(:/res/appicon/wx.png) 0 0 0 0;border:none;color:rgb(255, 255, 255);}" "Q