微信小程序,微信小程序开发教程

微信小程序封装请求接口数据

小程序如果出现多个页面请求数据接口，这时我们就得考虑封装接口来请求数据，这样让我们代码更加可用性，也方便维护。1、在根目录下创建request目录，然后新建一个文件夹index.js文件，添加如下代码：export;const;request=(params)=>{ ;;return;new;Promise((resolve,reject)=>{ ;;;;wx.request({ ;;;;;;...params, ;;;;;success:(result)=>{ ;;;;;;resolve(result); ;;;;;}, ;;;;;fail:(err)=>{ ;;;;;;;reject(err); ;;;;;} ;;;;}) ;;}); }2、使用封装的请求//;index.js //;引入发送请求方法 import;{;request;};from;"../../request/index.js" Page({ ;;data:;{ ;;;;seiperList:[] ;;}, ;;onLoad();{ ;;;;//;wx.request({ ;;;;//;;;url:;'http://www.example.top/api/Uniapp/home', ;;;;//;;;success:;(result);=>{ ;;;;//;;;;;this.setData({ ;;;;//;;;;;;;seiperList:result.data.data.slides ;;;;//;;;;;}) ;;;;//;;;} ;;;;//;}) ;;;;request({ ;;;;;;url:;'http://www.;example.top/api/Uniapp/home' ;;;;}).then(result=>{ ;;;;;;this.setData({ ;;;;;;;;;;;;;;seiperList:result.data.data.slides ;;;;;;;}) ;;;;}) ; ;;}, ; })

微信小程序自定义颜色变量，以及如何使用wxss变量

22天前

111 0

导语：开发小程序过程中，我们如果经常会用到同个颜色或者字体大小，为了方便维护和修改，我们可以使用变量来调用，后期修改和维护也方便。1、首先在全局样式文件app.wxss下创建我们的颜色变量page{ ;;/*;定义主体颜色;*/ ;;--themeColor:#f65551; ;;/*;定义统一的字体大小;*/ ;;font-size:28rpx; }2、使用样式变量view{ ;;color:;var(--themeColor); }这里我们在index页面的index.wxss中使用var(--themeColor)来使用我们的上面定义的变量

微信小程序自定义组件的使用，组件的应用方法

23天前

165 0

前景：我们在开发小程序的时候，有时头部是通用的，我们每个页面都写一样的代码，一个不好维护外，一个也会代码赘余。这时我们可以封装下组件使用自定义组件。小程序主要用到的"usingComponents": { },来引入组件。自定义组件步骤：例子：我们定一个用来放搜索框的组件1、新建组件：我们在项目根目录下新建components目录，用于放我们自定义的组件，然后新建search目录，并在目录下新建component，如下图所示2、组件的引用定义好组件之后，我们来使用组件，比如在index页面引入打开index.json文件，添加如下代码：左边是组件名，右边是组件路径;;"usingComponents":;{ ;;;;"Search":;"../../components/search/search" ;;},2、使用组件上面引入之后，我们就可以使用组件了，我们打开index.wxml，添加如下代码，引入我们的组件：<Search></Search><view> ;; ;;<Search></Search> ;; </view>可以看到已经成功引入该组件了

微信小程序引入阿里巴巴字体图标库

23天前

150 0

我们在做小程序项目开发的时候，需要用到字体图标，如果公司有美工的情况下可以自己做，没有的话可以使用阿里巴巴的字体图标库。1、首先打开阿里巴巴字体图标库网站：https://www.iconfont.cn/;，搜索自己想要的图标，加入购物车并登录。2、然后点击添加至项目3、点击确定4、点击查看在线链接5、这样就生成了图标样式链接//at.alicdn.com/t/font_2657441_2d26ihk9vh.css6、使用新建一个wxss文件，粘贴我们生成的字体库在公共样式文件中用import引入<view> 首页 <text;class="iconfont;icon-wode"></text> </view>

微信小程序发起微信支付失败问题

2021-06-28

144 0

在微信小程序开发中设置好之后，发现微信小程序发起微信支付失败问题，最后找到原因是因为微信小程序后台没绑定微信商户平台问题。具体操作如下：1、进微信小程序后台--微信支付，绑定一下商户号2、点击发起申请3、跳转到微信支付商户平台APPid账户管理页面，点击右边的添加关联appid4、填写小程序appid即可5、然后微信商户平台就会想小城发出授权申请，在小程序后台，点击确认即可这样就解决了发起微信支付失败问题。

微信小程序中往数组追加元素

2021-06-04

162 0

在微信小程序开发过程中，有时我们需要往数组中追加一个字段和对应的值，我们可以通过下面的方法来追加。假设有个数组starsKey，如下图所示：var;starsKey;=;[{;id:;2,;name:;"PHP开发",;stars:;1}，{;id:;3,;name:;"JAVA开发",;stars:;1}，{;id:;4,;name:;"Python开发",;stars:;2}];现有数组：arr1var;arr1;=;[{reason:;"1"},{reason:;"2"},{reason:;"4"}]我们如何往数组追加元素呢？可以采用for循环方法：;;for(var;p=0;;p<arr4.length;;p++){ ;;;;;;;;for;(var;_p;=;0;;_p;<arr1.length;;_p++);{ ;;;;;;;;;;arr4[p].reason=arr1[p].reason ;;;;;;;;;;//;console.log(arr1[_p].reason) ;;;;;;;;} ;;;;;;} ;;console.log(arr4)上面通过获取原有数组长度，再获取要插入数组长度，然后往数组插入元素。

解决微信小程序上滑白边问题

2021-06-04

227 0

在开发微信小程序的时候，如果加了背景颜色在苹果手机上运行，向下滑动会出现白边白边问题，如下图的粤康码：1、解决方法也很简单：打开app.json文件，修改如下配置，加入;"backgroundColor": "#d81e06"{ ;;"pages":;[ ;;;;"pages/index/index", ;;;;"pages/logs/logs" ;;], ;;"window":;{ ;;;;"backgroundTextStyle":;"light", ;;;;"navigationBarBackgroundColor":;"#d81e06", ;;;;"navigationBarTitleText":;"小程序", ;;;;"navigationBarTextStyle":;"white", ;;;;"backgroundColor":;"#d81e06" ;;}, ;;"style":;"v2", ;;"sitemapLocation":;"sitemap.json" }2、设置page全局背景色打开app.wxss，添加如下配置page{ ;;background-color:;#fff; }

微信小程序实现五星好评案例例子参考

2021-05-29

269 0

前景：小程序这几年很火，很多公司，特别是服务行业公司做一个满意度评分小程序还是不错的。效果图展示：.wxml代码： <view;class="star-title">1、品质效果</view> <view;class="star-pos"> ;;<image;class='stars';bindtap="changeColor";data-index='0';data-no="{{item}}";wx:for="{{stardata}}";wx:key="index" ;;;;;;;;src="{{flag[0]>=item?;'/asset/img/icon/star-red.png':;'/asset/img/icon/star-empty.png'}}";/> ;;<view;style='margin-left:;30rpx;'>{{startext[0]}}</view> </view> <view;class="star-title">2、服务质量</view> ;<view;class="star-pos"> ;;<image;class='stars';bindtap="changeColor";data-index='1';data-no="{{item}}";wx:for="{{stardata}}";wx:key="index" ;;;;;;;;;;src="{{flag[1]>=item?;'/asset/img/icon/star-red.png':;'/asset/img/icon/star-empty.png'}}";/> ;;<view;style='margin-left:;30rpx;'>{{startext[1]}}</view> </view> <view;class="star-title">3、综合管理</view> <view;class="star-pos"> ;;<image;class='stars';bindtap="changeColor";data-index='2';data-no="{{item}}";wx:for="{{stardata}}";wx:key="index" ;;;;;;;;src="{{flag[2]>=item?;'/asset/img/icon/star-red.png':;'/asset/img/icon/star-empty.png'}}";/> ;;<view;style='margin-left:;30rpx;'>{{startext[2]}}</view> </view>.js代码：Page({ ;;/** ;;;*;页面的初始数据 ;;;*/ ;;data:;{ flag:[0,;0,;0],;;//每行标记变量;改变显示的五角星 ;;;;startext:;['',;'',;''],;;;//各个下标对应每行显示;;5个评价中的一个;非常不满意/不满意 ;;;;stardata:;[1,;2,;3,;4,;5],;;//每颗星星对应的数值;;决定了渲染出几颗五角星 ;;}, ;;//;五星评价事件 ;;changeColor:;function;(e);{ ;;;;var;index;=;e.currentTarget.dataset.index;;;//判断选中了哪个评价;在前端页面写死的索引 ;;;;var;num;=;e.currentTarget.dataset.no;;//前端页面的;item;传来选择了多少个 ;;;;console.log(num) ;;;;var;a;=;'flag[';+;index;+;']'; ;;;;var;b;=;'startext[';+;index;+;']'; ;;;;console.log(a,b) ;;;;var;that;=;this; ;;;;if(num;==;1);{ ;;;;;;that.setData({ ;;;;;;;;[a]:;1, ;;;;;;;;[b]:;'非常不满意' ;;;;;;}); ;;;;};else;if;(num;==;2){ ;;;;;;that.setData({ ;;;;;;;;[a]:;2, ;;;;;;;;[b]:;'不满意' ;;;;;;}); ;;;;};else;if;(num;==;3);{ ;;;;;;that.setData({ ;;;;;;;;[a]:;3, ;;;;;;;;[b]:;'一般' ;;;;;;}); ;;;;};else;if;(num;==;4);{ ;;;;;;that.setData({ ;;;;;;;;[a]:;4, ;;;;;;;;[b]:;'满意' ;;;;;;}); ;;;;};else;if;(num;==;5);{ ;;;;;;that.setData({ ;;;;;;;;[a]:;5, ;;;;;;;;[b]:;'非常满意' ;;;;;;}); ;;;;} ;;}, }).wxss代码：/*;评价;*/ .star-pos;{ ;;margin:;10rpx; ;;display:;flex; ;;flex-direction:;row; } .stars{ ;;width:;40rpx; ;;height:;40rpx; ;;margin-left:;30rpx; }一开始做五星评分小程序会觉得很难，下面给出判断五星是否为空或者未选择方法：1、获取点击后的值，并赋值给数据，根据数组下标修改数组中的stars的值：这里往changeColor点击事件中追加如下方法;;;;;;//;修改数组中stars值 ;;;;;;var;id=;index; ;;;;;;for(var;q;=;0;;;q;<that.data.starsKey.length;;q++){ ;;;;;;;;if(that.data.starsKey[q].id;==id){ ;;;;;;;;;;this.setData({ ;;;;;;;;;;;;[`starsKey[${q}].stars`];:;num ;;;;;;;;;;}) ;;;;;;;;} ;;;;;;} ;;;;;;;;;//;修改数组中stars值end2、判断五星好评是否为空：当用户点击提交按钮，获取数据长度，starsKey几位后端接口数据数组。;;;;//;判断五星好评是否为空 ;;;;for;(let;r;=;0;r;<;_that2.data.starsKey.length;r++){ ;;;;;;if;(_that2.data.starsKey[r].stars;==0){ ;;;;;;;;wx.showToast({ ;;;;;;;;;;title:;'您还有未填写项', ;;;;;;;;;;image:;'/asset/cry.png', ;;;;;;;;;;mask:;true, ;;;;;;;;;;duration:;2000 ;;;;;;;;}) ;;;;;;;;;return;false ;;;　　} ;;;}

微信小程序跳转到其他小程序方法

2021-05-16

275 0

我们在开发小程序时，有时需要关联其他小程序，就可以在小程序中增加一个按钮，添加点击方法，然后跳转到其他小程序。wxml代码示例：<view;class="nav_item";bindtap="openwx";data-id="wxaa8473e0378e72be";data-path=""> <image;src="/asset/img/yx.png";class="navicon"></image> <view;class="nav_name">游戏</view> <view;class="nav_r"><image;src="/asset/img/more.png"></image></view> </view>添加点击事件和赋予data-id;和data-path的值js文件代码示例：;;openwx:function(evt){ ;;;;var;appId;=;evt.currentTarget.dataset.id; ;;;;var;path;=;evt.currentTarget.dataset.path;?;evt.currentTarget.dataset.path;:;''; ;;;;wx.navigateToMiniProgram({ ;;;;;;appId:;appId, ;;;;;;path:;path, ;;;;;;extraData:;{ ;;;;;;;;from:;'xxxxx' ;;;;;;}, ;;;;;;envVersion:;'release', ;;;;;;success(res);{ ;;;;;;;;//;打开其他小程序成功同步触发 ;;;;;;;;wx.showToast({ ;;;;;;;;;;title:;'跳转成功' ;;;;;;;;}) ;;;;;;} ;;;;}) ;;}这里通过evt.currentTarget.dataset来获取点击按钮后触发获取data-id;和data-path的值。

微信小程序实现分享至朋友圈方法

2021-04-09

387 0

分享到朋友圈的展示形式是小程序logo＋小程序名称微信小程序直接分享到朋友圈的实现：方法很简便：在js中添加onShareTimeline()函数即可，这一分享是要有前提的，从小程序开发文档，可以看到，基础库得从2.11.3开始才支持分享至朋友圈的，如果没更新基础库会出现以下灰色的。更改基础库，加入分享代码既可，重新提交版本审核既可注意事项"shareAppMessage"表示“发送给朋友”按钮，"shareTimeline"表示“分享到朋友圈”按钮显示“分享到朋友圈”按钮时必须同时显示“发送给朋友”按钮，显示“发送给朋友”按钮时则允许不显示“分享到朋友圈”按钮示例代码wx.showShareMenu({ ;;withShareTicket:;true, ;;menus:;['shareAppMessage',;'shareTimeline'] })

小程序登录、用户信息相关接口调整以及获取用户信息方法

2021-04-04

377 0

为优化用户的使用体验，平台将进行以下调整：2021年2月23日起，若小程序已在微信开放平台进行绑定，则通过wx.login接口获取的登录凭证可直接换取unionID2021年4月13日后发布的小程序新版本，无法通过wx.getUserInfo与<button open-type="getUserInfo"/>获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息），获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。新增getUserProfile接口（基础库2.10.4版本开始支持），可获取用户头像、昵称、性别及地区信息，开发者每次通过该接口获取用户个人信息均需用户确认。具体接口文档：《getUserProfile接口文档》由于getUserProfile接口从2.10.4版本基础库开始支持（覆盖微信7.0.9以上版本），考虑到开发者在低版本中有获取用户头像昵称的诉求，对于未支持getUserProfile的情况下，开发者可继续使用getUserInfo能力。开发者可参考getUserProfile接口文档中的示例代码进行适配。请使用了wx.getUserInfo接口或<button open-type="getUserInfo"/>的开发者尽快适配。开发者工具1.05.2103022版本开始支持getUserProfile接口调试，开发者可下载该版本进行改造。小游戏不受本次调整影响。一、调整背景很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗，如果用户点击拒绝，无法使用小程序，这种做法打断了用户正常使用小程序的流程，同时也不利于小程序获取新用户。二、调整说明通过wx.login接口获取的登录凭证可直接换取unionID若小程序已在微信开放平台进行绑定，原wx.login接口获取的登录凭证若需换取unionID需满足以下条件：如果开发者帐号下存在同主体的公众号，并且该用户已经关注了该公众号如果开发者帐号下存在同主体的公众号或移动应用，并且该用户已经授权登录过该公众号或移动应用2月23日后，开发者调用wx.login获取的登录凭证可以直接换取unionID，无需满足以上条件。回收wx.getUserInfo接口可获取用户个人信息能力4月13日后发布的新版本小程序，开发者调用wx.getUserInfo或<button open-type="getUserInfo"/>将不再弹出弹窗，直接返回匿名的用户个人信息，获取加密后的openID、unionID数据的能力不做调整。即wx.getUserInfo接口的返回参数不变，但开发者获取的userInfo为匿名信息。此外，针对scope.userInfo将做如下调整：若开发者调用wx.authorize接口请求scope.userInfo授权，用户侧不会触发授权弹框，直接返回授权成功若开发者调用wx.getSetting接口请求用户的授权状态，会直接读取到scope.userInfo为true新增getUserProfile接口若开发者需要获取用户的个人信息（头像、昵称、性别与地区），可以通过wx.getUserProfile接口进行获取，该接口从基础库2.10.4版本开始支持，该接口只返回用户个人信息，不包含用户身份标识符。该接口中desc属性（声明获取用户个人信息后的用途）后续会展示在弹窗中，请开发者谨慎填写。开发者每次通过该接口获取用户个人信息均需用户确认，请开发者妥善保管用户快速填写的头像昵称，避免重复弹窗。插件用户信息功能页插件申请获取用户头像昵称与用户身份标识符仍保留功能页的形式，不作调整。用户在用户信息功能页中授权之后，插件就可以直接调用 wx.login 和 wx.getUserInfo 。三、最佳实践调整后，开发者如需获取用户身份标识符只需要调用wx.login接口即可。开发者若需要在界面中展示用户的头像昵称信息，可以通过<open-data>组件进行渲染，该组件无需用户确认，可以在界面中直接展示。在部分场景（如社交类小程序）中，开发者需要在获取用户的头像昵称信息，可调用wx.getUserProfile接口，开发者每次通过该接口均需用户确认，请开发者妥善处理调用接口的时机，避免过度弹出弹窗骚扰用户。小程序获取用户信息方法<view;class="container"> ;;<view;class="userinfo"> ;;;;<block;wx:if="{{!hasUserInfo}}"> ;;;;;;<button;wx:if="{{canIUseGetUserProfile}}";bindtap="getUserProfile">;获取头像昵称;</button> ;;;;;;<button;wx:else;open-type="getUserInfo";bindgetuserinfo="getUserInfo">;获取头像昵称;</button> ;;;;</block> ;;;;<block;wx:else> ;;;;;;<image;bindtap="bindViewTap";class="userinfo-avatar";src="{{userInfo.avatarUrl}}";mode="cover"></image> ;;;;;;<text;class="userinfo-nickname">{{userInfo.nickName}}</text> ;;;;</block> ;;</view> </view>Page({ ;;data:;{ ;;;;userInfo:;{}, ;;;;hasUserInfo:;false, ;;;;canIUseGetUserProfile:;false, ;;}, ;;onLoad();{ ;;;;if;(wx.getUserProfile);{ ;;;;;;this.setData({ ;;;;;;;;canIUseGetUserProfile:;true ;;;;;;}) ;;;;} ;;}, ;;getUserProfile(e);{ ;;;;//;推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认 ;;;;//;开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 ;;;;wx.getUserProfile({ ;;;;;;desc:;'用于完善会员资料',;//;声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 ;;;;;;success:;(res);=>;{ ;;;;;;;;this.setData({ ;;;;;;;;;;userInfo:;res.userInfo, ;;;;;;;;;;hasUserInfo:;true ;;;;;;;;}) ;;;;;;} ;;;;}) ;;}, ;;getUserInfo(e);{ ;;;;//;不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息 ;;;;this.setData({ ;;;;;;userInfo:;e.detail.userInfo, ;;;;;;hasUserInfo:;true ;;;;}) ;;}, })

微信小程序如何默认按钮button去掉默认样式

2021-03-20

434 0

微信小程序和HTML去掉按钮样式不一样：;;;;<view;class="button-sp-area"> ;;;;;;<button;type="primary";plain="true">按钮</button> ;;;;</view>可以加下以下样式去掉带有虚边的样式button::after{ ;;;;border:none; }修改button按钮disabled为true时会出现灰色字体浅灰色背景的样式button[disabled]:not([type]);{ ;;background-color:;#fff; ;;color:;#1e82d2;; }修改button按钮点击时样式//;点击时样式 .button-hover;{ color:rgba(0,;0,;0,;0.6); background-color:#fff; }

微信小程序时间点击页面获取用户头像信息

2021-02-08

407 0

微信小程序获取头像信息必须使用点击按钮来获取，这个实际也是，只是想法思路不一样，我们可以把背景设置成透明，当用户点击屏幕触发按钮，这里构建一个透明按钮，宽高通过获取手机界面宽高，来赋予。;let;sysInfo;=;wx.getSystemInfoSync(); ;;;;;;;;//;获取微信界面大小 ;;;;;;;;let;screenWidth;=;sysInfo.screenWidth; ;;;;;;;;let;screenHeight;=;sysInfo.screenHeight; ;;;;;;;;const;wxLoginBtn;=;wx.createUserInfoButton({ ;;;;;;;;;;;;type:;'text', ;;;;;;;;;;;;text:;'', ;;;;;;;;;;;;style:;{ ;;;;;;;;;;;;;;left:;0, ;;;;;;;;;;;;;;top:;0, ;;;;;;;;;;;;;;width:;screenWidth, ;;;;;;;;;;;;;;height:;screenHeight, ;;;;;;;;;;;;;;lineHeight:;40, ;;;;;;;;;;;;;;backgroundColor:;'#00000000', ;;;;;;;;;;;;;;color:;'#ffffff', ;;;;;;;;;;;;;;textAlign:;'center' ;;;;;;;;;;;;} ;;;;;;;;;;}) ;;;;;;;;;;wxLoginBtn.onTap((res);=>;{ ;;;;;;;;;;;;console.log(res.userInfo) ;;;;;;;;;;})

小程序自定义轮播图样式

2020-04-05

1434 0

小程序自定义轮播图样式以下是各案例，仅供大家参考。效果展示：index.wxml代码：<view> ; ;;<view> ;;;;<swiper;indicator-dots="{{indicatorDots}}" ;;;;;;;;;;autoplay="{{autoplay}}";interval="{{interval}}";duration="{{duration}}";circular="{{circular}}";bindchange="swiperChange"> ;;;;;;<block;wx:for="{{banner}}"> ;;;;;;;;<swiper-item> ;;;;;;;;;;<view> ;;;;;;;;;;<image;src="{{item.ad_img}}";mode="scaleToFill"></image> ;;;;;;;;;;<view> ;;;;;;;;;;<view>{{item.ad_name}}</view> ;;;;;;;;;;</view> ;;;;;;;;;;</view> ;;;;;;;;</swiper-item> ;;;;;;</block> ;;;;</swiper> ;;;;<view> ;;;;;;<block;wx:for="{{banner}}";wx:key="unique"> ;;;;;;;;<view;class="dot{{index;==;swiperCurrent;?;';active';:;''}}"></view> ;;;;;;</block> ;;;;</view> ;;</view> ;;; </view>index.js代码：const;app;=;getApp() ; Page({ ;;data:;{ ;;;;now:'', ;;;;banner:;[], ;;;;circular:;true, ;;;;indicatorDots:;false, ;;;;autoplay:;true, ;;;;interval:;4000, ;;;;duration:;800, ;;;;swiperCurrent:;0, ;;}, ;;swiperChange(e);{ ;;;;let;current;=;e.detail.current; ;;;;//;console.log(current,;'轮播图') ;;;;let;that;=;this; ;;;;that.setData({ ;;;;;;swiperCurrent:;current, ;;;;}) ;;}, ;;//事件处理函数 ;;bindViewTap:;function();{ ; ;;}, ;;onLoad:;function;();{ ;;this.getBanner();;//获取轮播图 ;;}, ;;;;//;轮播 ;;getBanner:function(){ ;;;;var;that=this ;;;;wx.request({ ;;;;;;url:;app.AppUrl;+'/getBanner', ;;;;;;success(res);{ ;;;;;;;;that.setData({ ;;;;;;;;;;banner:;res.data.res_banner, ;;;;;;;;}) ;;;;;;} ;;;;}) ;;}, })index.wxss代码：.lunbo{;width:;96%;;margin-left:;2%;;;height:;350rpx;;background:;#000;;float:;left;;border-radius:;15rpx;;overflow:;hidden;position:;relative;} .lunbo;swiper{width:;100%;;height:;350rpx;;} .lunbo;image{;width:;100%;;height:;350rpx;;display:;block;;border-radius:;15rpx;} .lunbo;.name{background:;linear-gradient(transparent,rgba(0,0,0,.1);20%,rgba(0,0,0,.2);35%,rgba(0,0,0,.3);65%,rgba(0,0,0,.4)); width:;750rpx; position:;absolute; bottom:;-2rpx; left:;0px;} .lunbo;.name;view{ width:;500rpx; color:;#fff; padding-left:;20rpx; padding-bottom:;10rpx; padding-top:;10rpx; font-size:;30rpx; ;overflow:;hidden; ;;display:;-webkit-box; ;;-webkit-box-orient:;vertical; ;;text-overflow:;ellipsis; ;;-webkit-line-clamp:;1; } .dots{ ;;position:;absolute; ;;right:;0; ;;bottom:;20rpx; ;;display:;flex; } .dots;.dot{ ;;margin:;0;8rpx; ;;width:;8rpx; ;;height:;8rpx; ;;background:rgba(255,255,255,0.5); ;;border-radius:;8rpx; ;;transition:;all;.6s; } .dots;.dot.active{ ;;width:;24rpx; ;;background:;#fff; }

微信小程序跳转到外部、其他小程序

2020-04-04

997 0

微信小程序跳转到外部、其他小程序app.json文件，添加小程序appId"navigateToMiniProgramAppIdList":;[ "wx867ea05eaf079b91", "wx18a2ac992306a5a4" ]WXML文件：<view;class="user_draw";bindtap="openwx"> <view;class="word"><image;src="/asset/img/small.png"></image><view;class="tname">其他小程序</view></view> <view;class="wimg"><image;src="/asset/img/more.png"></image></view> </view>js代码：openwx:function(){ wx.navigateToMiniProgram({ appId:;'wx887aa15eac079b91', path:;'pages/index/index', extraData:;{ from:;'xxxxx' }, envVersion:;'release', success(res);{ //;打开其他小程序成功同步触发 wx.showToast({ title:;'跳转成功' }) } }) },

小程序实现分类内容下拉刷新，上拉加载更多

2020-04-01

1071 0

效果演示：小程序上拉加载更多，下来刷新，在项目开发中是最常见，以下是一个简单的案例，供大家参考wxml文件代码: <view;class="out"> ;; ;;;;<view;class='left'> ;;;;<block;wx:for="{{category}}"> ;;;;;;<view;class='nav-item;active';;wx:if="{{tags;==;item.id}}";data-id="{{item.id}}";bindtap="btn_cate">{{item.book_cate}}</view> ;;;;;;<view;wx:else;data-id="{{item.id}}";data-id="{{item.id}}";bindtap="btn_cate";class='nav-item'>{{item.book_cate}}</view> ;;;;;;</block> ;;;;</view> ;;;;<view;class='right'> ;;;;;;<view;class='book-list'> ;;;;;;<block;wx:for="{{art}}"> ;;;;;;;;<view;class='book-item';bindtap='book_detail';data-id="{{item.id}}";bindtap="change_book_d"> ;;;;;;;;;;<view;class='bookimg'><image;src='{{item.img}}';mode='widthFix'></image></view> ;;;;;;;;;;<view;class='bookname'>{{item.name}}</view> ;;;;;;;;;;<view;class='bookproject'>{{item.desc}}</view> ;;;;;;;;;;<view;class='bookdesc'>+在线阅读</view> ;;;;;;;;</view> ;;;;;;;</block> ;;;;;;</view> ;;;;</view> </view>json文件代码："enablePullDownRefresh": true, 开启小程序下拉刷新{;; "enablePullDownRefresh":;true, ;;"usingComponents":;{} ; }js文件代码://;pages/book/book.js const;app;=;getApp() var;page;=;1;;//设置默认页码 Page({ ; ;;/** ;;;*;页面的初始数据 ;;;*/ ;;data:;{ ;;;;category:;[], ;;;;tags:;'3', ;;;;art:;[] ;;}, ; ;;/** ;;;*;生命周期函数--监听页面加载 ;;;*/ ;;onLoad:;function;(options);{ ;;;;this.category();;//查询分类标签 ;;;;this.getArt(); ;;}, ; ;;/** ;;;*;生命周期函数--监听页面初次渲染完成 ;;;*/ ;;onReady:;function;();{ ; ;;}, ; ;;/** ;;;*;生命周期函数--监听页面显示 ;;;*/ ;;onShow:;function;();{ ; ;;}, ; ;;/** ;;;*;生命周期函数--监听页面隐藏 ;;;*/ ;;onHide:;function;();{ ; ;;}, ; ;;/** ;;;*;生命周期函数--监听页面卸载 ;;;*/ ;;onUnload:;function;();{ ; ;;}, ; ;;/** ;;;*;页面相关事件处理函数--监听用户下拉动作 ;;;*/ ;;onPullDownRefresh:;function;();{ ;;;;//;显示顶部刷新图标 ;;;;wx.showNavigationBarLoading(); ;;;;var;that;=;this; ;;;;var;tags;=;that.data.tags ;;;;page;=;1; ;;;;wx.request({ ;;;;;;url:;app.AppUrl;+;'/get_book/cate_name/';+;tags;+;'?page=';+;page, ;;;;;;success:;function;(res);{ ;;;;;;;;that.setData({ ;;;;;;;;;;art:;res.data.result, ;;;;;;;;}) ;;;;;;;;//;隐藏导航栏加载框 ;;;;;;;;wx.hideNavigationBarLoading(); ;;;;;;;;//;停止下拉动作 ;;;;;;;;wx.stopPullDownRefresh(); ;;;;;;} ;;;;}) ;;}, ; ;;/** ;;;*;页面上拉触底事件的处理函数 ;;;*/ ;;onReachBottom:;function;();{ ;;;;//;显示加载图标 ;;;;wx.showLoading({ ;;;;;;title:;'玩命加载中', ;;;;}) ;;;;//;页数+1 ;;;;page;=;page;+;1; ; ;;;;var;that;=;this; ;;;;var;tags;=;that.data.tags ;;;;wx.request({ ;;;;;;url:;app.AppUrl;+;'/get_book/cate_name/';+;tags;+;'?page=';+;page, ;;;;;;success:;function;(res);{ ;;;;;;;;var;oldData;=;that.data.art;;//获取旧的数据 ;;;;;;;;var;newData;=;res.data.result;;//获取旧的数据 ;;;;;;;;that.setData({ ;;;;;;;;;;art:;oldData.concat(newData) ;;;;;;;;}) ;;;;;;;;//;隐藏加载框 ;;;;;;;;wx.hideLoading(); ;;;;;;} ;;;;}) ;;}, ; ;;/** ;;;*;用户点击右上角分享 ;;;*/ ;;onShareAppMessage:;function;();{ ; ;;}, ;;//;查询分类标签 ;;category:;function;();{ ;;;;var;that;=;this ;;;;wx.request({ ;;;;;;url:;app.AppUrl;+;'/getbookcate', ;;;;;;success(res);{ ;;;;;;;;that.setData({ ;;;;;;;;;;category:;res.data.result, ;;;;;;;;}) ;;;;;;} ;;;;}) ;;}, ;;//;获取文章 ;;getArt:;function;();{ ;;;;var;tags;=;this.data.tags; ;;;;var;that;=;this ;;;;wx.request({ ;;;;;;url:;app.AppUrl;+;'/get_book/cate_name/';+;tags;+;'/page=';+;page, ;;;;;;success(res);{ ;;;;;;;;that.setData({ ;;;;;;;;;;art:;res.data.result, ;;;;;;;;}) ;;;;;;} ;;;;}) ;;}, ;;//;点击获取分类文章 ;;btn_cate:;function;(e);{ ;;;;var;tags;=;e.currentTarget.dataset.id ;;;;var;that;=;this ;;;;that.setData({ ;;;;;;tags:;tags ;;;;}) ;;;;page;=;1; ;;;;wx.request({ ;;;;;;url:;app.AppUrl;+;'/get_book/cate_name/';+;tags;+;'?page=';+;page, ;;;;;;success(res);{ ;;;;;;;;that.setData({ ;;;;;;;;;;art:;res.data.result, ;;;;;;;;}) ;;;;;;} ;;;;}) ;;} })wxss样式文件代码：page{ ;;;width:;100%; ;;;height:;100%; } ;.out{ ;;;;width:100%; ;;;;height:100%; ;;;;display:;flex; ;;;;flex-direction:row-reverse; } .left{ ;;;width:18%; ;;;height:;100%; ;;;border-right:2rpx;solid;#ccc; ;;;position:;fixed; ;;;left:;0px; ;;;top:;0px; } .nav-item{ ;;text-align:;center; ;;font-size:;32rpx; ;;padding:;30rpx;0; } .active{ ;;color:;#fb7299; ;;border-left:3px;solid;#fb7299; ;;} .right{ ;;;width:76%; ;;;height:;100%; ;;;padding:;20rpx; ;;;text-align:;center; ;; } .book-list{ ;;width:;100%; ;;display:;flex; ;;flex-wrap:;wrap; ;;justify-content:;space-between; } .book-item{ ;;width:;48%; ;;margin:;10rpx;0; ;;border:1rpx;solid;#ddd; ; } .bookimg{ ;;width:;100%; } .bookimg;image{ ;;width:;100%; ;;display:;block; ;;height:;612rpx; } .bookname{ ;;;;overflow:;hidden; ;;display:;-webkit-box; ;;-webkit-box-orient:;vertical; ;;text-overflow:;ellipsis; ;;-webkit-line-clamp:;1; ;;font-size:;28rpx; ;;text-align:;left; ;;padding:;5rpx;0; ;;color:;#333; ;;font-weight:;bold; ;;padding-left:;15rpx; ;;;padding-right:;15rpx; } .bookproject{ ;;overflow:;hidden; ;;display:;-webkit-box; ;;-webkit-box-orient:;vertical; ;;text-overflow:;ellipsis; ;;-webkit-line-clamp:;2; ;;font-size:;20rpx; ;;text-align:;left; ;;padding:;3rpx;0; ;;color:;#555; ;;padding-left:;15rpx; ;;;padding-right:;15rpx; } .bookdesc{ ;;;;overflow:;hidden; ;;display:;-webkit-box; ;;-webkit-box-orient:;vertical; ;;text-overflow:;ellipsis; ;;-webkit-line-clamp:;1; ;;text-align:;right; ;;font-size:;24rpx; ;;color:;#999; ;;padding-bottom:;22rpx; ;;padding-right:;15rpx; ;;padding-top:;12rpx; }

微信小程序刷新当前页面，并跳转到其他页面

2020-03-31

948 0

刷新当前页面：//;首先判断当前页面加载的所有页面的数组，数组中最后一个就是当前页面，然后onload当前页面。 if;(getCurrentPages().length;!=;0);{ ; ;;//刷新当前页面的数据 ;;getCurrentPages()[getCurrentPages().length;-;1].onLoad() }刷新当前页面并跳转到指定页面：这里以跳转到tobar页面为演示：//;首先判断当前页面加载的所有页面的数组，数组中最后一个就是当前页面，然后onload当前页面。 if;(getCurrentPages().length;!=;0);{ ; ;;//刷新当前页面的数据 ;;getCurrentPages()[getCurrentPages().length;-;1].onLoad() ;;//;关闭当前页面，跳转到应用内的某个页面。 ;;wx.switchTab({ url:;'/pages/new/new' ;;}) }

小程序富文本解析器towxml3.0的使用

2020-03-26

1682 0

Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。;特色：;1、可控制的音频播放器（可自行调节样式，解决原生audio在部分iPhone上不能自动播放的情况）2、支持代码语法高亮3、支持emoji表情4、支持上标、下标、下划线、删除线、表格、视频、图片（几乎所有html元素）……5、支持typographer字符替换6、多主题动态支持7、极致的中文排版优化8、Markdown TodoList下载地址：https://github.com/jyblogs/towxml或者：git clone git@github.com:jyblogs/towxml.git使用流程：1、下载，解压，复制至小程序根目录2、引入库/app.js//app.js App({ ;;;;;;;//;引入`towxml3.0`解析方法 ;;;;;;;towxml:require('/towxml/index') }) 3.;在页面配置文件中引入towxml组件;/pages/index/index.json ; { ;;"usingComponents":;{ ;;;;"towxml":"/towxml/towxml" ;;} }4. 在页面中插入组件/pages/index/index.wxml <view> ;;<towxml;nodes="{{article}}"/> </view>5. 解析内容并使用/pages/index/index.js//获取应用实例 const;app;=;getApp(); Page({ ;;;;;;;data:;{ ;;;;;;;;;;;;;;isLoading:;true,;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;//;判断是否尚在加载中 ;;;;;;;;;;;;;;article:;{};;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;//;内容数据 ;;;;;;;}, ;;;;;;;onLoad:;function;();{ ;;;;;;;;;;;;;;let;result;=;app.towxml(`#;Markdown`,'markdown',{ ;;;;;;;;;;;;;;;;;;;;;base:'https://xxx.com',;;;;;;;;;;;;;;;;;;;;;;;;//;相对资源的base路径 ;;;;;;;;;;;;;;;;;;;;;theme:'dark',;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;//;主题，默认`light` ;;;;;;;;;;;;;;;;;;;;;events:{;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;//;为元素绑定的事件方法 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;tap:(e)=>{ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;console.log('tap',e); ;;;;;;;;;;;;;;;;;;;;;;;;;;;;} ;;;;;;;;;;;;;;;;;;;;;} ;;;;;;;;;;;;;;}); ; ;;;;;;;;;;;;;;//;更新解析数据 ;;;;;;;;;;;;;;this.setData({ ;;;;;;;;;;;;;;;;;;;;;article:result, ;;;;;;;;;;;;;;;;;;;;;isLoading:;false ;;;;;;;;;;;;;;}); ;;;;;;;;;;;;; ;;;;;;;} })str 必选，html或markdown字符串type 必选，需要解析的内容类型html或markdownoptions [object] 可选，可以该选项设置主题、绑定事件、设置base等APIapp.towxml(str,type,options)有三个参数;base [string] 可选，用于指定静态相对资源的base路径。例如：https://xx.com/static/theme [string] 可选，默认:light，用于指定主题'light'或'dark'，或其它自定义events [object] 可选，用于为元素绑定事件。key为事件名称，value则必须为一个函数。例如:{tap:e=>{console.log(e)}}towxml3.0 支持以下功能：;echarts图表，默认禁用，需自行构建以开启此功能LaTeX数学公式，默认禁用，需搭建解析服务并自行构建以开启此功能yuml图表，默认禁用，需要搭建解析服务并自行构建以开启此功能highlight代码高亮，默认开启（默认仅开启bash、javascript、json、python、html、css、php、scss、shell），其它语言高亮支持需自行构建以开启

小程序头部滚动导航，置顶头部导航

2020-03-25

896 0

小程序头部滑动导航例子，主要运用微信的 scroll-view 和样式;white-space: nowrap;wxml文件代码：<view;class="container">  <view;class='totle-nav'> <scroll-view;class='scroll-wrap';scroll-x="true";style='width:100%;'> <text;class="active">导航1</text> <text>导航2</text> <text>导航3</text> <text>导航4</text> <text>导航5</text> <text>导航2</text> <text>导航3</text> <text>导航4</text> <text>导航5</text> <text>导航2</text> <text>导航3</text> <text>导航4</text> <text>导航5</text> <text>导航2</text> <text>导航3</text> <text>导航4</text> <text>导航5</text> </scroll-view> </view>  <view;class="new_list"> <view;class="new_item">1</view> </view> </view>wxss代码：.totle-nav{ margin:;0; padding:;0; width:;100%; height:;80rpx; position:;fixed; left:;0rpx; top:;0rpx; transform:;translateZ(0); z-index:;999; background:;#fff; border-bottom:;1px;solid;#ddd; overflow:;hidden; } .totle-nav;.scroll-wrap{ white-space:;nowrap; display:;inline-block; background-color:#fff; font-size:;32rpx; width:;100%; box-sizing:border-box; } .totle-nav;.scroll-wrap;text{ display:;inline-block; padding:;10px;0;4px;0; margin:;0;18rpx; color:#333; box-sizing:;border-box; } .totle-nav;.scroll-wrap;text.active{ border-bottom:3px;solid;#fb7299; color:;#fb7299; } .new_list{;width:;100%;float:;left;;padding-top:;100rpx;;} .new_item{width:;100%;;float:;left;;margin-bottom:;20rpx;;border-bottom:;solid;3px;#edeef0;;;padding-bottom:;10rpx;}最终效果：

微信小程序，滑动选项卡案例

2019-11-19

1171 0

微信小程序，滑动选项卡：1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。;2、swiper组件的current组件用于控制当前显示哪一页;3、swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页效果图：wxml代码：<view;class="tabbox"> <scroll-view;scroll-x="true";class="tab-h";scroll-left="{{scrollLeft}}"> ;;<view;class="tab-item;{{currentTab==0?'active':''}}";data-current="0";bindtap="swichNav">推荐<view></view></view> ;;<view;class="tab-item;{{currentTab==1?'active':''}}";data-current="1";bindtap="swichNav">电视剧<view></view></view> ;;<view;class="tab-item;{{currentTab==2?'active':''}}";data-current="2";bindtap="swichNav">电影<view></view></view> ;;<view;class="tab-item;{{currentTab==3?'active':''}}";data-current="3";bindtap="swichNav">综艺<view></view></view> ;;<view;class="tab-item;{{currentTab==4?'active':''}}";data-current="4";bindtap="swichNav">动漫<view></view></view> </scroll-view> <swiper;class="tab-content";current="{{currentTab}}";duration="300";bindchange="switchTab";style="height:{{winHeight}}rpx"> ;;<swiper-item> <scroll-view;scroll-y="true";class="scoll-h"> <view;class="item-ans">  1  </view> </scroll-view> ;;</swiper-item> ;;<swiper-item> <scroll-view;scroll-y="true";class="scoll-h"> <view;class="item-ans"> ;; 2 ;; </view> </scroll-view> ;;</swiper-item> ;;<swiper-item> <scroll-view;scroll-y="true";class="scoll-h"> <view;class="item-ans"> ;; 3 ;; </view> </scroll-view> ;;</swiper-item> ;;<swiper-item> <scroll-view;scroll-y="true";class="scoll-h"> <view;class="item-ans"> ;; 4 ;; </view> </scroll-view> ;;</swiper-item> ;;<swiper-item> <scroll-view;scroll-y="true";class="scoll-h"> <view;class="item-ans">  ;;5  </view> </scroll-view> ;;</swiper-item> </swiper> </view>wxss代码：.tabbox{;width:;100%;;float:;left;;} .tab-h;{ height:;65rpx; width:;100%; box-sizing:;border-box; overflow:;hidden; white-space:;nowrap; } .tabbox;.tab-item;{ color:;#999999; font-size:;28rpx; display:;inline-block; float:;left; padding-top:;10rpx;;padding-left:;22rpx;;padding-right:;22rpx;;line-height:;32rpx; position:;relative; } .tabbox;.tab-item;view{;display:;none;;width:;8rpx;;height:;8rpx;;border-radius:;50%;;background:;#293844;;position:;absolute;;top:;0rpx;;right:;10rpx} .tabbox;.tab-item.active;{ color:;#293844;;font-size:;32rpx; font-weight:;bold; position:;relative; } .tabbox;.tab-item:nth-child(1){;padding-left:;30rpx;} .tabbox;.tab-item.active;view{;display:;block;} .tabbox;.tab-content;{ margin-top:;0rpx; } .tabbox;.scoll-h;{ height:;100%; }js代码：const;app;=;getApp() Page({ data:;{ //;切换 winHeight:;"",;//窗口高度 currentTab:;0,;//预设当前项的值 scrollLeft:;0,;//tab标题的滚动条位置 //;切换 }, //;切换 //;滚动切换标签样式 switchTab:;function;(e);{ this.setData({ currentTab:;e.detail.current }); this.checkCor(); }, //;点击标题切换当前页时改变样式 swichNav:;function;(e);{ var;cur;=;e.target.dataset.current; if;(this.data.currentTaB;==;cur);{ return;false; };else;{ this.setData({ currentTab:;cur }) } }, //判断当前滚动超过一屏时，设置tab标题滚动条。 checkCor:;function;();{ if;(this.data.currentTab;>;4);{ this.setData({ scrollLeft:;300 }) };else;{ this.setData({ scrollLeft:;0 }) } }, /** ;;;*;生命周期函数--监听页面卸载 ;;;*/ onLoad:;function;();{ var;that;=;this; //;;高度自适应 wx.getSystemInfo({ success:;function;(res);{ var;clientHeight;=;res.windowHeight, clientWidth;=;res.windowWidth, rpxR;=;750;/;clientWidth; var;calc;=;clientHeight;*;rpxR;-;180; console.log(calc) that.setData({ winHeight:;calc }); } }); }, })

微信小程序置顶导航，替代原生导航栏

2019-11-16

1096 0

效果图：思路：Navigation是小程序的顶部导航组件，当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏，wx.getSystemInfoSync获取可使用窗口高度wxml代码： <view;class="header";style="padding-top:{{statusBarHeight}}px"> <view;class="searchbtn"> <image;src="/pages/asset/img/search_03.jpg";class="search_pic"></image> <view;class="search_word">;哪吒之魔童降世</view> </view> <view;class="history"><image;src="/pages/asset/img/time_05.jpg"></image></view> </view> wxss代码：.header{;width:;100%;;height:;58rpx;;position:;fixed;;left:;0rpx;;top:;0%;;background:;#fff;;z-index:;111} .searchbtn{;width:;50%;;height:;58rpx;;margin-top:2%;;float:;left;;;margin-left:30rpx;;border-radius:;45rpx;;background:;#f5f5f5;} .search_pic{;display:;block;;width:;34rpx;;height:;34rpx;;float:;left;margin-top:;3%;;margin-left:;18%;;} .search_word{;font-size:;24rpx;;float:;left;;color:;#bbbbbb;font-family:;'微软雅黑';;line-height:;58rpx;;text-align:;left;;margin-left:;8rpx;} .history{;display:;block;;width:;34rpx;;height:;34rpx;;float:;left;;margin-top:3.5%;;margin-left:30rpx;} .history;image{;width:;34rpx;;height:;34rpx;}app.json修改window下navigationStyle 为 custom"window":;{ "backgroundTextStyle":;"light", "navigationBarBackgroundColor":;"#fff", "navigationBarTitleText":;"影视", "navigationBarTextStyle":;"black", "navigationStyle":;"custom" },最后，wx.getSystemInfoSync获取可使用窗口高度，app.js下，加上以下代码//app.js App({ globalData:;{ statusBarHeight:;wx.getSystemInfoSync()['statusBarHeight'] },页面js文件添加到data:Page({ data:;{ statusBarHeight:;app.globalData.statusBarHeight, ;;} })

微信小程序-实现旋转木马轮播功能

2019-11-16

1178 0

效果图：技术要点：自动滚动+手动拖拽（原生组件帮我们完成 Property：autoplay）;面板指示点（原生组件帮我们完成 Property：indicator-dots）;左右可以露出非Active状态图的边缘（即Quiet状态，后文class会以这两个名字定义）（原生组件帮我们完成 Property：previous-margin、next-margin）;图片滚动到中心位置放大，滚动出去缩小（我们手写实现，利用技术点中提到的滚动回调+条件渲染。其中滚动回调用 Property：bindchange）.wxml 代码: <view;class="lunbo"> <swiper;class='swiperClass';autoplay;interval="3000";indicator-color="#a39f99";indicator-active-color="#f49641";indicator-dots;;duration="1000";previous-margin="30rpx";next-margin="30rpx";circular;bindchange="bindchange";style='height:;{{swiperHeight}}rpx'> <block;wx:for="{{imgUrls}}";wx:key="{{index}}"> <swiper-item> <image;src="{{item}}";class="slide-image;{{swiperIndex;==;index;?;'active';:;'quiet'}}";mode='aspectFill'> </image> </swiper-item> </block> </swiper> </view> .js 代码：Page({ data:;{ statusBarHeight:;app.globalData.statusBarHeight, imgUrls:;[ '/pages/asset/images/index_03.jpg', '/pages/asset/images/index_03.jpg', '/pages/asset/images/index_03.jpg', '/pages/asset/images/index_03.jpg' ], indicatorDots:;false, swiperIndex:;0,;//这里不写第一次启动展示的时候会有问题; swiperCurrent:;0, interval:;3000, },.wxss代码：.lunbo{;width:;100%;;float:;left;;margin-top:27rpx;} .swiperClass;{ margin:;0; } .slide-image;{ width:;100%;; height:;100%; border-radius:;10px; position:;relative; } image.active;{ transform:;none; transition:;all;0.2s;ease-in;0s; }; image.quiet;{ transform:;scale(0.95333333); transition:;all;0.2s;ease-in;0s; }