想做一个全屏滚动的效果，于是在网上找了一个差不多的例子，但是觉得有些地方不是很好，于是改进了一下；先给大家展示下效果图，感觉不错，请参考实例代码。代码： wxml: <!-- 第一页 -- ><view id=hook1 class="section section01 {{scrollindex==0?active:}}" style=background:red bindtouchstart="scrollTouchStart" bindtouchmove=scrollTouchMove bindtouchend="scrollTouchEnd"><view class=cont><view class=cont-body><...
在微信小程序中，有遇到要展示店铺评分，或者是订单完成后对商品进行评价，用到了星星展示，查了下，在微信中无法使用svg实现图片，微信中只能将svg图片转成base64来显示，所以是在vue中使用的svg来实现评分 1.效果图 微信中的可以点击及显示，但是，显示的话，在4.2分，4点多分的时候，显示的是半颗星vue中用的是svg实现，所以用的是占比的形式,可以有一点点的星2.微信实现店铺评分显示及商品评价星星展示 子组件index.wxml，可以...
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候，弹窗应用场景还是蛮广泛的，但是微信官方提供的弹窗比较有局限性，不能自定义修改。这个时候首先想到的是自定义组件化开发，就是把弹出框封装成一个组件，然后多处调用。 解决了小程序开发自定义弹窗出现后，遮罩层下的页面仍可以滚动的方法； 给遮罩层的最外层view中加入catchtouchmove=”preventTouchMove” 即可解决该遮罩层点透问...
今天写微信小程序突然发现一个尴尬的问题，请求报错需要提示，就去小程序API里找，可悲的小程序的toast并不能满足我的需求，原生提供的方法调用如下 wx.showToast({title: 成功,icon: succes,duration: 1000,mask:true })下面是官方API的说明 可以看到支持的图标只有两种，连基本的warning和error都没有，最可悲的是title最多只支持7个汉字的长度，完全不能忍啊，现在哪个框架里还没有个正儿八经提示框的组件，想想还是自己写一个算...
直接进入正题，我们需要做的就是通过手指滑动列表项后，右侧出现删除；比如说像这样：向左边滑动后出现如下的效果：开始撸代码～假设我们有N个列表项来自一个数组list，先确定基本的结构 <view class="list" wx:for="{{list}}" wx:key><view class="item"><view class="wrap">{{item}}</view><view class="delete"><text>删除</text></view></view> </view>在item中分别放入wrap作为显示项目内容的容器，与delete删除按钮的容器。当...
前言 随着小程序的热度不减，更多的电商大佬来时使用小程序，在微信小程序开发中，经常会遇到一些兼容性的问题，下面这篇文章就记录下在微信小程序中遇到的一些兼容性问题，iOS兼容性1.iOS中input的placeholder属性字体不居中对placeholder设置line-height及font-size对input设置高度2.iOS中滚动卡顿设置-webkit-overflow-scrolling:touch;3.微信小程序中解决iOS中new Date() 时间格式不兼容在实现倒计时，根据后台返回的时间格式转...
前言 在做微信小程序时，觉得小组里对购物车的实现不是很完美，就自己尝试的写了下，然后用到了父子组件传值，父子组件传值的话，和vue框架上是非常相似的，以及calc这个css函数，calc有个注意点，自己不怎么用，一时间有差点忘了，这里记录下下面话不多说了，来一起看看详细的介绍吧 1.效果图2.子组件实现要实现图中删除的效果，使用组件的形式更好做点，我当时本想直接在pages里实现，不过结果就是，滑动时，所有的商品都显示了删...
效果图如下所示：具体代码如下所示： <swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" current="0" bindchange="swiperChange"> <block wx:for="{{imgUrls}}" wx:index="{{index}}"> <swiper-item class="swiper-item"> <image mode="aspectFill" src="{{item}}" class="slide-image {{swiperIndex == index ? active : }}"/> </swiper-item> </block> </swiper> .swiper-block{ height: 480rpx; width...
微信小程序获取用户当前位置有三个方式： 1. wx.getLocation（多与wx.openLocation一起用）获取当前的精度、纬度、速度。不需要授权。当type设置为gcj02 返回可用于wx.openLocation的坐标2. wx.chooseLocation需要授权，打开地图选择位置第一次调用方法时先出现允许权限之后之后再出现如果第一次就不允许，则一直调用wx.chooseLocation的fail方法 3. wx.openLocation需要授权，使用微信内置地图查看位置。多半用于查看起点到终点的...
微信小程序里面的自带弹窗icon只有两种，success和loading。有时候用户输入错误的时候想加入一个提醒图标，也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的；但是如果图标是字体，或者提醒的内容有很长捏（小程序中提醒的内容最多只能设置7个字，多了会被隐藏），那就只有自定义toast弹窗了； 第一步：新建一个wxml文件用来装模板，方便以后使用，比如然后在这里面添加模板代码 <template name="toast"> //nam...
1.下载阿里图标，解压出来之后有个.css文件然后复制这css里面的所有代码 2.新建一个wxss文件，例如我新建的就是iconfont.wxss，然后把刚才复制的所有代码，复制到这个文件里面去。 3.在需要使用到图标的页面导入该wxss文件。例如：这样在该wxml页面就可以使用图标了总结 以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。...
先给大家展示下效果图，大家感觉不错，请参考实现代码：实现原理：点击按钮，往需要动画的div中添加或移除拥有动画效果的class。 由于微信小程序中不能操作page这个根节点，所以，只有用一个div（view）来模仿page根节点。 1.结构 <view class=page {{isFix?"pageShow":"pageHide"}} ><view class=header> <view class=h-toggle iconfont icon-list bindtap=pageBtn></view></view> </view> <view class=r-box {{isFix?"fixShow...
具体代码如下所示： // 1.scroll-y="true" Y轴滚动 // 2.应该是设置了高才能行 // 3.使用scroll-top属性实现滚动到底部,scroll-top不要带单位 <scroll-view scroll-y="true" style="height:{{height-50}}px;" scroll-top="{{scrollTop}}"><block wx:for="{{recordList}}" wx:key="item.id"><view><text>{{item.text}}</text></view</block> </scroll-view>Page({data: {// 列表recordList：,height: ,scrollTop: 0},onLoad: funct...
网上很多实现跑马灯的文章，但是很多发现都是不行的，之一就是文字宽度居然是通过字符数*文字size计算，明显是不准确的计算方式。我看了下，发现可以通过计算控件宽度来精确计算文字宽度，这样实现的跑马灯是比较完善的。 效果如下：实现代码如下： wxml: <view class="rollCon"><view class=box> <view class=textstyle=left:{{offsetLeft}}px >{{text}}</view> </view> </view>wxss: .rollCon {position: fixed;top: 0;left: 0;w...
本文实例为大家分享了微信小程序自定义tabBar组件的具体代码，供大家参考，具体内容如下 以下代码保存在github地址 先看一看目录 template文件夹里存放tabbar模板。 template/template.wxml <template name="tabBar"> <view class="tabBar"><block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar"><view class="tabBar-item"><navigator open-type="redirect" url="{{item.pagePath}}"><view><image class="icon" src=...