小程序图片加载失败替换图片
小程序图片加载失败替换图片
问题介绍 在开发小程序的时候经常会遇到有些图片失效的问题,记录下我是这么解决的 本来官方文档里面有图片发生错误监听的方法,一直没注意到 实现效果 当图片发生错误时,我们就把图片url改成默认的图片url <image binderror="imageError" class="lists-img" data-index="{{index}}" src="{{item.cover||m1.getimg(item.description)}}" mode="scaleToFill"></image> 我们先使用data-index进行数据绑定,拿到index的值 imageError(e) { var index = e.currentTarget.dataset.index; var img = 'dataa['+index+'].cover' this.setData({ [img]:'../../static/image.png' }) }, 当图片发生错误就进入这个方法,使用e.currentTarget.dataset拿到index的值 如果index为零的话,那就能知道图片的路径变量是this.data.dataa[0].cover 然后给url设置新的值即可
 2022-12-31
Vue实现搜索小功能
Vue实现搜索小功能
介绍 使用vue实现数据搜索功能,因为功能简单就不过多介绍了 搜索框 <input type="text" placeholder="请输入关键词" v-model="search"/> 数据 search:'', videoList:[ { name:'文件夹_1', id:1, file:[ { active: false, id: 1, name: " 测试视频", url:"hs/63902e5da667f.mp4", }, ] }, { active: false, id: 3, name: " 测试视频", url:"http2e5da667f.mp4", }, ], 使用计算属性 computed:{ searchList(){ if(this.search == ''){ return this.search }else{ return this.videoList.filter(item=>{ return item.name.includes(this.search) }) } } },
 2022-12-8
经常用到的小程序左右卡片
经常用到的小程序左右卡片
介绍 经常可以在很多小程序内看到左右两个小卡片,我自己也经常写到,记录一下,后面用到直接复制粘贴即可 演示 代码 <view class="two-box"> <view class="one"> <view class="content-left"> <view class="hdjh"> 活动计划 </view> <view class="hdjh-btn"> 点击进入 </view> </view> <view class="content-right"> <tui-icon name="member-fill" color="rgb(77, 137, 134)" size="35"></tui-icon> </view> </view> <view class="two"> <view class="content-left"> <view class="gzzd"> 活动计划 </view> <view class="gzzd-btn"> 点击进入 </view> </view> <view class="content-right"> <tui-icon name="order" color="rgb(65, 154, 253)" size="35"></tui-icon> </view> </view> </view> 注意上面有用到tui的图标,直接换成图片或别的图标即可,网页使用可直接将view替换成div .two-box{ width: 96%; display: flex; justify-content: space-between; margin: 10px 2%; } .one{ background-color: rgb(234, 248, 245); width: 40%; border-radius: 5px; display: flex; justify-content: space-around; padding: 15px; } .content-left .hdjh{ font-weight: 700; color: rgb(77, 137, 134); } .content-left .hdjh-btn{ font-size: 11px; display: initial; color: #fff; font-weight: 500; border-radius: 10px; padding: 1px 3px; background-color: rgb(77, 137, 134); } .two{ background-color: rgb(236, 242, 255); width: 40%; border-radius: 5px; display: flex; justify-content: space-around; padding: 15px; } .content-left .gzzd{ font-weight: 700; color: rgb(65, 154, 253); } .content-left .gzzd-btn{ font-size: 11px; display: initial; color: #fff; font-weight: 500; border-radius: 10px; padding: 1px 3px; background-color: rgb(65, 154, 253); }
 2022-12-2
小程序根据字段排序
小程序根据字段排序
定义一个比较器 function compare(propertyName) { console.log(propertyName) return function (object1, object2) { var value1 = object1[propertyName]; var value2 = object2[propertyName]; if (value2 > value1) { return -1; } else if (value2 < value1) { return 1; } else { return 0; } } } 使用方法 success.sort(compare("sid")); //sid比较的值,根据自己需求
 2022-10-11
uniapp中如何隐藏scroll-view的滚动条
uniapp中如何隐藏scroll-view的滚动条
我们在使用uniapp的scroll-view组件的时候,它经常会出现滚动条。
 2022-7-1
Mac下composer安装
Mac下composer安装
安装命令 先进入到以下目录 #cd /usr/local/bin 输入命令 #curl -sS -k https://getcomposer.org/installer | php PS:如果出现 All settings correct for using Composer The installation directory "/usr/local/bin" is not writable sudo chown -R $(whoami):admin /usr/local/bin 请输入上面这一条 -- 然后提示计算机输入密码 - 在重新执行 curl -sS -k https://getcomposer.org/installer | php 重命名 composer.phar 输入命令: sudo mv composer.phar /usr/local/bin/composer 修改composer权限 输入命令: sudo chmod a+x /usr/local/bin/composer 然后输入composer,回车,会看到相关版本信息,出现如下页面,说明安装成功 ThinkPHP6安装: 在需要安装的目录下执行下列命令,其中“tp”是文件夹名字,可随意命名,它会创建一个"tp"文件夹,里面是一个框架样本app. composer create-project topthink/think tp 在上述“tp”文件夹里执行下列命令,它会安装页面模版功能。 composer require topthink/think-view 安装多应用模式扩展 composer require topthink/think-multi-app
 2022-6-5
Nodejs写入文件复制文件
Nodejs写入文件复制文件
要求 //1.创建一个c1的记事本 在记事本中写入数据    春日偶成宋程颢   云淡风轻近午天, 傍花随柳过前川。  时人不识余心乐,将谓偷闲学少年。 //2.复制c1的内容到c2中 完整代码 var fs = require("fs") var data = "春日偶成程颢\r\n云淡风轻近午天,\r\n傍花随柳过前川。 \r\n时人不识余心乐,将谓偷闲学少年。" fs.writeFile("./c1.txt",data,function(err){ if(err){ console.log("写入失败") }else{ fs.readFile('./c1.txt',function(err,data){ if(err){ console.log('读取文件失败了') }else{ fs.writeFile('./c2.txt',data,function(err){ if(err){ console.log("复制失败") }else{ console.log("复制成功") } }) } }) } }) 附件 2022-5-29.docx
 2022-5-30

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录