sunshime的博客

  应微信小程序项目需求，要实现一个带滑块并可左右滑动的进度条，看了小程序的文档，发现上面的progress组件无法满足需求，所以我自己写了一个，在这里总结一下。一、效果图二、实现逻辑功能实现的逻辑比较简单，这里简单说明一下：首先用一个标签将相关代码包裹起来，加上静态定位；画两条一模一样的线条，其中一条加上相对定位改变线条的颜色，动态设置它的宽度；画一个滑块，使用相对定位定到线条上面，给它加bindtouchmove事件，获取它距离左边的宽度，然后对应设置上去即可。三、相关代码1、

  这里总结一下我在项目中使用 swiper 标签踩过的坑，轮播图 swiper标签不能用两层以上的view 标签进行包裹，不然是无效的。  下面这个是有效的代码：

  今天，在开发一个项目的时候，想要使用字体图标，减少项目的大小，然后自己下载好自己选的图标，引入引进使用的时候发现一直不行，多次百度搜索之后总结之后终于可以正常使用。现在分享给大家使用的方法。第一步，选好图标并下载。先到 Iconfont-阿里巴巴矢量图标库（其他库也可以） 选好自己所需要的图标，然后将它下载下来。第二步，将下载后的文件解压，并找到 后缀名为 ttf 文件，将它转化成bas...

  今天给大家分享一下如何使用canvas绘制海报并实现分享，下面我分享一下实现的过程：效果图：实现过程  首先，在wxml文件中写入 canvas 标签，并设置 canvas-id，注意，canvas-id 必须要设置，不然我们无法创建 canvas 的绘图上下文 CanvasContext 对象，也无法在上面绘制我们需要的东西。<canvas canvas-id="mycanv...

  今日给大家分享一下如何实现导航栏（nav）和内容部分上下联动（相关代码模块我已单独整理放到github上面了，欢迎前来start）。一、效果图：github地址：https://github.com/sunshime/weChatSkill二、实现过程：   主要是使用 scroll-view 实现导航栏部分，用 swiper 实现下面的内容部分，通过 swiper 的 curren...

  今天给大家分享一下如何实现微信小程序左右菜单栏联动效果，具体过程如下：效果图：一、wxml文件  这里需要注意的一点是：右边列表循环的那一项必须要加上 id="scroll-{{index}}" ，少了这个是无法实现左边联动右边的效果的，这个坑我踩了很多次，所以在这里重点强调一下。<!-- 实现左右联动效果 --><view class="link"> &...

  闲暇时间写一个小程序商城小项目的时候，遇到了左滑删除的功能，经过各种百度研究之后，实现了下图效果，现在分享一下我的实现过程：效果图：实现过程：一、wxml布局这里我是先用了一个大盒子包裹小盒子，然后小盒子里面进行左右布局（左边为内容部分，右边为删除按钮）的方式实现的<!-- 通过 isTouchMove 的值来对应移动位置--> <view class="it...

  今天我在做一个点击某个按钮显示弹框的时候，发现弹框自带的蒙层盖完整个页面了，但是被盖住的内容还是可以上下滑动，这个效果并不是我想要的，经过我多次研究并百度之后，我终于可以解决这个问题了，下面我来说一下如何实现的：注意点：这个效果在编辑器（电脑）上面是看不出效果的，需要用手机上看才能看出效果1、弹框里面没有滚动条的情况：  直接在弹框蒙层最外层加上catchtouchmove="{{tru...

1、在对应需要复制相关信息的标签那里绑定事件（使用的标签不固定，可以是text、view等）例子：<view class="item"> <text>我的CSDN网址：</text> <text class="phone adr" bindtap='copyText'>https://blog.csdn.net/LiaoFengJ...

1、在对应需要拨打电话的标签那里绑定事件（使用的标签不固定，可以是text、view等）例子：<text class="phone" bindtap="callPhone">400-9121-211</text>2、在对应的事件方法里面写入 wx.makePhoneCall方法例子：callPhone() { wx.makePhoneCall({ ...

  在做项目过程中，我们会把多个相同的模块做成一个组件，然后供多个页面一起使用，这样可以实现组件复用。下面我来说说如何实现小程序中的父子组件之间的传值。1、父组件向子组件传值  子组件是通过 properties 来接收父组件传递过来的值例子：（1）子组件  1）wxml文件<!--wxml文件--> <!--components/button/button.wxml...

1、wxml文件：  注意：一定要写 opne-type=“share”,button标签一定要在它的外面包裹一层view标签，不然我们是看不到button标签的<view class='enjoy'> <button class='share' open-type="share">立即分享</button></view>2、js文...

  我们要放入多张一样宽度不一样高度的图片的时候，我们不能同时都设置固定的高度，这样会使得一些图片被挤压或者有些会出现空白的现象，这些都不能满足我们的需求，所以我来说一下如何实现图片高度自适应。我们只需要在image标签上面加上 mode=“widthFix” 即可wxml文件：<view class='det-img'> <image mode="widthFi...

  路由跳转是我们在写项目过程中必用的一个api，路由跳转的方式有很多种，这里我来介绍一下 不带参数的路由跳转方式以及带参数的路由跳转方式（这里通过 wx.navigateTo 来介绍，其他的方式的用法一样）：1、不带参数的路由跳转方式：wx.navigateTo({ url: '../detail/detail'})2、带参数的路由跳转方式：要跳转的那个页面// 路由跳转传递参...

  小程序绑定事件的方式有很多种，这里我只对bindtap的绑定方式进行介绍，其他的绑定方式也是差不多这样的。1、不带参数的绑定方式index.wxml文件中：share表示绑定的事件名称<view class='enjoy' bindtap='share'>立即分享</view>index.js文件中：share(){ console.log('分享。...

  小程序的循环结构：wx:for，其中，wx:for对应的是要循环的那个数组，wx:for-index对应的是循环数组的索引值，wx:for-item对应的是循环数组中的每一项，wx:key表示的是数组的唯一值（在使用wx:for的时候要加上这个，否则编译器会提示警告）。下面举个例子：在index.wxml文件中<view class='sort-ct-item' wx:for='{...

存数据在App.js 文件中添加以下代码注意：mealsList 应为自己想要存的那个数据globalData: { mealsList:[], // 选择套餐信息}在要存数据的那个页面添加以下代码这里我是在全局中添加 mealsList 变量来存放要存的对应的数据const app = getApp();let mealsList = res.data.Data;a...

微信小程序是可以动态修改页面标题的。在我们开发小程序的时候我们会时不时的需要修改某个页面的标题，这时我们可以单个进行修改。下面我来介绍一下：1、在对应页面的json文件里面加入下面代码就可以实现了{ "navigationBarTitleText": "商品信息"}2、在js文件写下面代码就可以实现了changeTitle: function () { wx.setNav...