微信小程序拖拽实现
<view class='collectBox'bindtap='addCollect'wx:if="{{write[0]+write[1] > 0}}"bindtouchmove="touchmove"catch:touchmovestyle="left:{{write[0]}}px;top:{{write[1]}}px;"><image src='https://www.zhangshengrong.com/images/icon/addcollect.png'></image></view>// pa...
2024-01-10
微信小程序实现折叠面板
本文实例为大家分享了微信小程序MUI折叠面板的具体代码，供大家参考，具体内容如下实现原理通过控制详情部分的显示隐藏，来实现折叠效果，同时切换右侧向下箭头。效果图WXML<!--pages/accordion/accordion.wxml--><view class="tui-accordion-content"> <view class="tui-menu-list {{isShowFrom1 ? 'tui-shangjiantou' : 'tui-xiajianto...
2024-01-10微信小程序实现原生步骤条
本文实例为大家分享了微信小程序实现原生步骤条的具体代码，供大家参考，具体内容如下效果（步骤条颜色不对是录制工具的问题）思路其实与轮播图类似，使用了两个并排的轮播容器，在滑动监听后，给图片加上移动和缩放动画。扩展可以用于标签页的切换。vue与微信小程序有类似的地方，...
2024-01-10微信小程序 生命周期详解
微信小程序 生命周期通俗的讲，生命周期就是指一个对象的生老病死。 从软件的角度来看，生命周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。下面从一下三个方面介绍微信小程序的生命周期：应用生命周期页面生命周期应用生命周期影响页面生命周期》》》应用生命周期用...
2024-01-10微信小程序实现跑马灯效果
网上很多实现跑马灯的文章，但是很多发现都是不行的，之一就是文字宽度居然是通过字符数*文字size计算，明显是不准确的计算方式。我看了下，发现可以通过计算控件宽度来精确计算文字宽度，这样实现的跑马灯是比较完善的。效果如下：实现代码如下：wxml:<view class="rollCon"> <view class='box'> <v...
2024-01-10微信小程序商品到详情的实现
微信小程序商品到详情结构代码资源分享给大家.商品页post.wxmldata-postid="{{index}}view class="container" swiper indicator-dots indicator-color="rgba(255,255,255,0.3)" indicator-active-color="rgba(255,255,255,1)" autoplay swiper-item image src= ...商品页 post.wxmldata-postid="{{index}}...
2024-01-10
微信小程序篇：Flex布局
前置准备工作微信小程序中经常会使用的布局这一块的知识点，如果没有一个完整的知识体系，在布局的时候，经常会出现错误使用的情况，只要你掌握这篇文章内的知识点，基本上能胜任所有的Flex布局。相比较其他文章，这个文章更侧重于开发中的实际运用。而且是以演进的角度来讲解各种布局的...
2024-01-10微信小程序实现手势滑动效果
本文实例为大家分享了微信小程序实现手势滑动的具体代码，供大家参考，具体内容如下wxml:<view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view>index.js:var touchStartX = 0;//触摸时的原点 var touchStartY = 0;//触摸时的原点 var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑...
2024-01-10安卓版微信小程序跳一跳辅助
今天一上班 被github上的一篇名为《教你用python玩跳一跳》吸引，它的星也瞬间从3400涨到4400 原作者主要就是用python 脚本去 玩微信小程序跳一跳，本次是基于安卓机型配合Mac电脑进行测试ios版本请移动 ios 直通车点击打开链接ios 直接改分版本戳这里 飞机票大致就是需要先去安装adb 然后执行...
2024-01-10微信小程序学习之初探小程序
前言9月21日，传言已久的微信应用号正式以“微信公众平台小程序”的名义发布，依然采取了内测制度，目前只有少部分开发者可使用。“微信之父”张小龙在朋友圈介绍，这种小程序是一种不需要下载安装即可使用的应用，用户扫一扫或者搜一下即可打开应用，对用户来说应用触手可及，对微信来...
2024-01-10微信小程序实现菜单左右联动
本文实例为大家分享了微信小程序实现菜单左右联动的具体代码，供大家参考，具体内容如下今天记录一个个人写的二级联动示例。下面是效果图：功能实现关键是使用控件scroll-view，下面直接上示例代码。页面对应的js文件：Page({ data: { select_index:0, scroll_height:0, left: [{ id: 1, title: '选项一' }, ...
2024-01-10微信小程序 网络通信实现详解
关于网络通信，这里我使用的是wx.request,官方代码示例如下:wx.request({ url: 'test.php', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) }})对于初学者而言，官方示例可能会看不怎么懂，所以我就以我自己当初项目...
2024-01-10微信小程序 下拉菜单简单实例
微信小程序 下拉菜单简单实例wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: ...
2024-01-10
微信小程序实现可长按移动控件
微信小程序可长按移动控件，供大家参考，具体内容如下–包含超出边界监测，性能不够理想【原因：setData在毫秒级刷新时会极大程度影响渲染性能】JavascriptPage({ /** * 页面的初始数据 */ data: { //浮动按钮坐标 flow_y: 130, flow_x: 20, pre_y:0, pre_x:0, //标记移动 moveFlag: false, //标记控件是否可放置...
2024-01-10
微信小程序网络封装(简单高效)
废话引言小程序虽然出世很久了，但一直没怎么接触到小程序开发。吉他兴趣班老师想弄一个小程序发布课程信息和打卡功能，作为IT一员就自愿加入了这个小程序开发小组中。虽然小程序面向的是前端工程师，但作为移动端程序猿感觉甚是友好，加上有点前端基础就更是觉得入手很easy啦。微信小程...
2024-01-10详解微信小程序调起键盘性能优化
在小程序中，我们经常有调起键盘的操作场景，但是在不同的场景下解决方案不尽相同，还是需要具体问题具体分析。需求分析最近在项目中有一个需求，是从列表页点击评论按钮进入详情页时，在加载完页面后自动调起键盘进入评论状态。从需求来看，我们应该在onReady函数中调起键盘，因为onReady...
2024-01-10
微信小程序自定义底部弹出框动画
微信小程序之自定义底部弹出框动画，供大家参考，具体内容如下最近做小程序时，会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果，但是体验性太差，也比较简单粗暴。想要美美地玩，添加点动画还是非常有必要的。下面做一个底部上滑的弹框。wxml<view class="modals modals-bottom-dialog" hidde...
2024-01-10微信小程序实现自上而下字幕滚动
本文实例为大家分享了微信小程序实现字幕滚动的具体代码，供大家参考，具体内容如下需求：实现框内的文字自下而上的自动循环滚动。解决方案：第一种方法：经查询，最一开始实现字幕滚动是使用的微信小程序的swiper组件，后来发现，使用swiper组件实现的效果类似于轮播图，不符合需求。...
2024-01-10微信小程序实现点击卡片 翻转效果
动画效果： wxml:<view class='main'> <!--正面的框 --> <view class="box b1" animation="{{animationMain}}" bindtap='rotateFn' data-id="1" > <image src=""></image> </view> <!--背面的框 --> <view class="box b2" animation="{{animationBack}}" bindtap='rotateFn' data-i...
2024-01-10微信小程序实现列表的横向滑动方式
微信小程序原生方式实现列表的横向滑动的两种方法：效果图：方式一：简单样式实现父元素设置：white-space:nowrap;//不换行overflow-x: auto;子元素设置：display:inline-block;方式二：scroll-view 标签 + 样式scroll-view的横向滚动：scroll-view的内层view元素需要：display：inline-block;scroll-view的外层元素需要：whit...
2024-01-10微信小程序实现单选选项卡切换效果
这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法，供大家参考，具体内容如下效果如图：wxml:<view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem"> <view class="choosebtn {{idx==currentidx&&choose==true?'choosedbtn':'choosenobtn'}}">...
2024-01-10微信小程序按钮点击动画效果的实现
动画效果如下：GIF看起来可能会有点卡wxml<view class="confirm bubble">确定</view>wxss.confirm{ width: 325rpx; height: 80rpx; background: #07c160; border-radius: 6rpx; font-size: 30rpx; color: #fff; line-height: 80rpx; text-align: center; }.bubble{ position: relative; overflo...
2024-01-10详解微信小程序之一键复制到剪切板
最近在开发小程序项目里遇到一个小难题-----一键复制在网页开发里 我们可以引用大牛封装好的复制插件，比如无flash插件clipboard.js适用移动端，pc端-------言归正装，打开微信开发文档打开-APi即可查询到： 第一个是设置要复制的内容到剪切板，第二个是获取剪切板的内容，我们要用到的是第一个...
2024-01-10
微信小程序 接入腾讯地图的两种写法
最近在写微信小程序，遇到了一些坑，在网上也查了好多，感觉都没有我想要的答案，刚处理了这个地图的问题，在这里总结下，希望可以帮助大家。在微信小程序中，腾讯地图的接入其实是有两种方式的，第一种调用腾讯本身的地图，第二种是使用插件 ma-route一、调用腾讯本身的地图实现结果如...
2024-01-10
