- 博客(36)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 uni-app的组件倒计时使用
倒计时使用1.引入 import countDown from '@/components/countDown/index.vue'; components: { countDown },2.使用，stop_time为时间戳 <view class='time'> <count-down :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="':'" :minute-text="':'" :s
2020-08-25 17:59:51
2057
原创 vue移动端页面返回顶部
页面滚动到一定高度出现返回顶部按钮，点击返回顶部，按钮消失以下代码，新建组件，引用方可使用<!-- 拖拽滑动 --><template> <div id="default_drag_return" @click="topreturn()"> ↑ </div></template><script>export default { name: "returntop", data() { ret
2020-08-13 17:14:06
1252
1
原创 vue移动端可拖拽功能
vue移动端可拖拽功能类似手机上桌面的小气泡，可随意拖动1：首先在vue的公共组件中（components）新建个组件<!-- 拖拽滑动 --><template> <div id="default_drag_comp" @click="goNext" @touchstart="down" @touchmove="move" @touchend="end" > <a :href="'tel:' +
2020-08-13 17:06:31
1236
原创 vue引用背景图片方法
<div class="tuijian" :style="{'background-image': 'url('+data.image_url+')'}"> </div>
2020-08-11 15:13:33
674
原创 按钮防止多次点击
防止按钮在短时间内多次点击，多次触发事件<button bindtap="toGetWithdraw" >确定</button> //点击确定按键 toGetWithdraw:function(){ var that=this; if(that.data.showis==true){ that.zhifu(); that.setData({
2020-07-15 11:13:57
362
1
原创 小程序返回上一页刷新
onUnload: function() { let pages = getCurrentPages(); //页面栈 let beforePage = pages[pages.length - 2]; console.log(beforePage.route); beforePage.onLoad(); },
2020-07-14 11:09:37
208
原创 小程序样式自定义单选多选
小程序单选多选自定义:xhml:<view class="tixian"> <view wx:for="{{money}}" class="tx_money" style="{{item.select==true?'color:#fff;background-image: url(/liantui_card/resource/images/txbg.png)':''}}" wx:key="" bindtap='theme' data
2020-07-08 17:14:35
230
原创 使用github，安装git
搜索 git安装下载链接下载中文包中文包下载链接一共是三个文件然后在github官网新建项目，在电脑所需位置克隆文件，将代码拉进去后提交–推送–ok
2020-07-01 15:37:51
75
原创 小程序多出的文字截取
小程序中，数据只显示两行，多出的用…显示.shopcom .s_name{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; word-break: break-all; word-wrap: break-word;}
2020-07-01 14:03:28
386
原创 小程序分享escape()
分享escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。 //点击分享的链接进入(拼团接口) onShareAppMessage: function(res) { var a = this; var pid=a.data.pid; var t = "../car_list/carlist?carlist_&pid="+pid; var i = "/beauty_shop/pages/base/base?&sha
2020-07-01 09:25:41
475
原创 小程序富文本
富文本/wxParse/wxParse.wxmlwxml:<import src="/wxParse/wxParse.wxml"></import> <view class="jieshao"> <template is="wxParse" data="{{wxParseData:content2.nodes}}"></template> </view>js: var t = this;
2020-06-30 17:53:40
105
1
原创 小程序从底部弹出内容（抽屉式）
wxml: <view bindtap="shop" data-statu="open">点击弹出</view> <view class="zhezhao" data-statu="close" bindtap="close" wx:if="{{gouwu==true}}"> <view class="shoping" animation="{{animationData}}"> .
2020-06-29 10:10:19
1294
原创 微信小程序视频播放
video微信开发文档 <view class="banner" wx:if="{{list.is_buy!=1}}">//is_buy是否已购买 <image src="{{list.bimg}}"></image> <image bindtap="menu_on" src="../../resource/video.png"></image> </view> <video
2020-06-23 15:17:29
887
原创 小程序图片比例展示
获取屏幕宽高wx.getSystemInfo({ success: function (res) { // 获取可使用窗口宽度 let clientHeight = res.windowHeight; // 获取可使用窗口高度 let clientWidth = res.windowWidth; // 算出比例 let ratio = 750 / clientWidth; // 算出高度(单位rpx) let height = clien
2020-06-20 18:33:57
417
原创 小程序几种跳转方法
wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转， 以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。wx.redirectTo 当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 5 层页面栈。这时，我们应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面
2020-06-18 12:53:28
557
原创 小程序分享页面点击顶部房子返回首页
描述扫码进入了一个活动分享页面,顶部有一个小房子按钮,通常是点击后进入首页,但是分享进来的点击小房子还是原来的页面,没有跳到首页,可以在分享页的js中加入以下代码,测试有效 onUnload () { wx.reLaunch({ url: '/pages/index'//原始首页路径 })},...
2020-06-18 12:50:15
550
转载 小程序json设置下拉等
enablePullDownRefresh,动态设置下拉加载loading等连接https://www.cnblogs.com/MicKing/p/10906121.html
2020-06-18 10:55:08
188
原创 小程序弹出授权用户信息和手机号
授权用户信息和授权手机号,可分开使用,必须用按钮触发<button bindgetuserinfo="login" open-type="getUserInfo">获取授权</button> //获取授权 login:function(){ var that=this; wx.getSetting({ success: function(a) { a.authSetting["scop
2020-06-15 17:12:21
2230
原创 获取分值用星评展示
data:{ score:4,//分数 grade: [0, 2, 4, 6, 8], noSrc: 'resource/jb_img/x0.png',//没有选中,暗色 seleSrc: 'resource/jb_img/x1.png',//选中亮色 halfSrc: 'resource/jb_img/x1_5.png',//半星 } <block wx:for="{{grade}}" wx:for-item="log" wx:..
2020-06-12 14:23:26
77
原创 for循环字数过长截取
获取的数据中的某个字段过长或想截取某段,只要截取后重新复制就行,页面正常展示 if(t[index].introduce.length>40){ t[index].introduce=t[index].introduce.substring(0,40)+"..." } <view wx:for="{{t}}">{{t.introduce}}</view> ...
2020-06-12 14:19:08
202
原创 小程序星评一星半星
js:data:{ stars: [0, 2, 4, 6, 8],//z这里后端需要1分是半星的传输,如果半星是0.5分的话用[0,1,2,3,4,5] normalSrc: 'resource/jb_img/x0.png',//暗色 selectedSrc: 'resource/jb_img/x1.png',//亮色 halfSrc: 'resource/jb_img/x1_5.png',//半星 key: 0,//评分} .
2020-06-12 14:11:02
157
原创 小程序顶部tap顶部导航切换,方法二
这是第二种方法,适用于切换页面的展示效果相同时使用wxml:<view class="container"> <view class="nav"> <view class="navfirst"> <scroll-view scroll-x="true" class="" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}"> <bl
2020-06-12 13:17:51
341
原创 小程序顶部tap顶部导航切换,方法一
这是第一种方法,适用于切换的页面展示效果不同时可用wxml:<view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text></view> <!---->&
2020-06-12 11:47:12
587
原创 上拉加载空数据不刷新页面
在下拉加载时,手机滑动到底部每次都会执行一次获取数据的方法然后拼接刷新数据渲染.讲获取的数据进行空值判断可以控制是否执行获取数据的方法 data: isReachBottom:true;//上拉加载执行 if(shop.length==0){//获取的数据为空时不执行 that.setData({ isReachBottom:false }) } //下拉加载方法事件 onReachBottom: func
2020-06-11 17:22:03
210
原创 小程序tap短时间内重复点击数据重复
我在写小程序是有一个有顶部tap栏的状态,在多次点击tap栏时无法及时清理渲染的数据,导致数据重复展示,手写了以下的方法,计算点击时间,如果时间太短就不执行方法. navbarTap: function (e) { var that=this; that.setData({nomer:that.data.nomer+1}) if(that.data.nomer==1){that.setData({time1:e.timeStamp})}//第一次点击时记录时间 if(th
2020-06-11 16:22:31
557
原创 小程序点击遮罩层隐藏点击内容不隐藏
遮罩层会出现当想点击遮罩的暗处时隐藏,可是点击内容也会隐藏,只要在最外层添加标识就可以区分遮罩层和弹出的内容了.//data-ref='self'重点<view wx:if="{{show}}" class="classType" data-ref='self' bindtap="hide"><view class="cont">弹出的内容</view></view> //点击遮罩层后面空白处隐藏 hide:function(e){
2020-05-29 17:57:50
1534
3
原创 小程序流程进度条
展示效果wxml:<view class="progress"> <view class="libao rad1"> <view>10人</view> <view class="radius radius_active"></view> <view class="imgs">礼包</view> </view> <vi
2020-05-28 11:47:40
691
原创 小程序常用方法,标签总结
一:跳转页面1. 跳转tab页面:wx.switchTab({})2. 跳转new页面:wx.navigateTo({})3. 返回上一页:wx.navigateBack({})4. 打开一个页面没有顶部返回按钮:wx.redirectTo({})二:常用方法.获取手机号:必须用<button><button open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber">获取手机号</butto
2020-05-26 15:38:48
274
原创 手机长按保存html2canvas
首先,下载html2canvas.js引入<html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>html2canvas example</title> <script src="js/jquery-2.1.4.min.js"></script&
2020-05-15 17:21:42
429
原创 小程序时间显示适应ios
小程序获取时间后苹果手机显示NAN时分秒,使用.replace(/-/g, “/”)适配手机 var newTime='2020-5-15 16:56:13'; var newtime2 = newTime .replace(/-/g, "/") //转换后即可兼容啦
2020-05-15 16:58:11
307
1
原创 小程序上拉加载数据page
在json中填写"onReachBottomDistance":30js中使用onReachBottom()监听用户上拉触底事件。 onReachBottom: function() { wx.showLoading({ title: '玩命加载中..', }) this.getlist();},在this.getlist()方法中接口成功后success,原来加载的数据与新加载的合并concat() success: function (a)
2020-05-15 16:54:30
180
原创 ECharts图,曲线图,扇形图使用
echart官网echart官网https://www.echartsjs.com/zh/index.html展示效果使用方法:html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="./incuba
2020-05-15 13:13:10
494
原创 微信的Tab导航栏
微信的Tab导航栏展示效果js data: { navbar: ['全部', '待支付', '待发货', '待收货', '售后'], currentTab: 0, idx: '', }, navbarTap: function (e) { let idx= e.currentTarget.dataset.idx; console.log("idx:"+idx); this.setData({ currentTab: idx, i
2020-05-15 13:04:28
343
原创 获取当前时间的几天后
var newtime2=this.getDay(7);//获取7天后的时间 var time2= new Date(newtime2).getTime();//转成时间戳格式 getDay :function(day){ var that=this; var today = new Date(); var targetday_milliseconds=today.getTime() + 1000*60*60*24*day; .
2020-05-13 13:13:33
235
原创 时间获取时间差并倒计时
有最终结束时间,用最终结束时间减去当前时间,获取时间差,时间差倒计时util.jsdatetimeTo:时间戳格式//取倒计时（天时分秒）function getTimeLeft(datetimeTo){ // 计算目标与现在时间差（毫秒） let time1 = new Date(datetimeTo).getTime(); let time2 = new Date().getTime(); let mss = time1- time2; let a=Math.floor(m
2020-05-13 13:10:14
904
原创 小程序多个倒计时
小程序多个倒计时wxml代码<view wx:for="{{wearList.datetime}}" wx:for-item="item" wx:key="id"> <view class='dates'>{{item.difftime}}</view></view>js代码Page({ data:{ datetime:[ { dat:1589244432 }, { dat:1589417772
2020-05-11 13:02:50
193
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人