Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 在写微信小程序时，有写到实现3D轮播图的效果，可以直接使用微信小程序中自带的组件swiper来实现 效果图如下： [图片] 1.swiper的相关属性 indicator-dots 是否显示小圆点，也可以自己重新设置小圆点circular 是否衔接滑动，就是实现无限滚动previous-margin 与上一张图片的间距next-margin 与下一张图片的间距autoplay 实现自动滚动这里主要利用了circular实现无限滚动，然后再加上前后间距，再设置图片的层级和透明度就可以实现了,将图片及容器的高度设置好就差不多可以实现了 wxml文件 <swiper class="imageContainer" bindchange="handleChange" previous-margin="50rpx" next-margin="50rpx" circular autoplay>  <block wx:for="{{3}}" wx:key="{{index}}">  <swiper-item class="item">  <image class="itemImg {{currentIndex == index ? 'active': ''}}" src="../../../image/3.jpg"></image>  </swiper-item>  </block> </swiper> wxss文件 page{   background: #f7f7f7f7;  }  .imageContainer{   width: 100%;   height: 500rpx;   background: #000;  }  .item{   height: 500rpx;  }  .itemImg{   position: absolute;   width: 100%;   height: 380rpx;   border-radius: 15rpx;   z-index: 5;   opacity: 0.7;   top: 13%;  }  .active{   opacity: 1;   z-index: 10;   height: 430rpx;   top: 7%;   transition:all .2s ease-in 0s;  }  JS文件 Page({     data: {   currentIndex: 0   },      onLoad: function (options) {       },   /* 这里实现控制中间凸显图片的样式 */   handleChange: function(e) {   this.setData({   currentIndex: e.detail.current   })   },  })

好的经验必须要分享：chooseImage后转base64 现在网上各种帖子的解决方案存在各种各样的问题，不说了，直接贴代码，手机亲测，没有问题 const fileManager = wx.getFileSystemManager(); [图片]

闲来无事，无意中发现云函数中的request网络请求可以不用配置校验域名和https，也就是说可以通过云函数封装一个请求通用函数来处理没有域名和https的网络请求（甚至包括内网穿透，可以用非80端口进行实验）。 适用场景： A、没有域名或使用局域网（直接使用IP访问）； B、使用花生壳动态域名解析（内网穿透）； C、有域名但不想申请配置HTTPS（懒人）； D、连自己的服务器都没有，接口直接使用开源或者第三方接口且不能添加域名校验的情况（空壳）； E、不愿意直接在小程序中直接暴露自己逻辑API实际请求地址的（安全）； ······ 具体步骤如下： 1、给项目添加云函数支持（https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html） 2、新建名为“proxy”的云函数，配置支持request-promise [代码]// package.json[代码][代码]{[代码][代码]    [代码][代码]"name"[代码][代码]: [代码][代码]"proxy"[代码][代码],[代码][代码]    [代码][代码]"version"[代码][代码]: [代码][代码]"1.0.0"[代码][代码],[代码][代码]    [代码][代码]"description"[代码][代码]: [代码][代码]""[代码][代码],[代码][代码]    [代码][代码]"main"[代码][代码]: [代码][代码]"index.js"[代码][代码],[代码][代码]    [代码][代码]"scripts"[代码][代码]: {[代码][代码]        [代码][代码]"test"[代码][代码]: [代码][代码]"echo \"Error: no test specified\" && exit 1"[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]"author"[代码][代码]: [代码][代码]""[代码][代码],[代码][代码]    [代码][代码]"license"[代码][代码]: [代码][代码]"ISC"[代码][代码],[代码][代码]    [代码][代码]"dependencies"[代码][代码]: {[代码][代码]        [代码][代码]"wx-server-sdk"[代码][代码]: [代码][代码]"latest"[代码][代码],[代码][代码]        [代码][代码]"request"[代码][代码]: [代码][代码]"latest"[代码][代码],[代码][代码]        [代码][代码]"request-promise"[代码][代码]: [代码][代码]"latest"[代码][代码]    [代码][代码]}[代码][代码]}[代码][代码]// 云函数入口文件index.js[代码] [代码]const cloud = require([代码][代码]'wx-server-sdk'[代码][代码])[代码][代码]const rq = require([代码][代码]'request-promise'[代码][代码])[代码][代码]cloud.init()[代码][代码]// 云函数入口函数[代码][代码]// event为小程序调用的时候传递参数，包含请求参数uri、headers、body[代码][代码]exports.main = async (event, context) => {[代码][代码]    [代码][代码]return[代码] [代码]await rq({[代码][代码]        [代码][代码]method: [代码][代码]'POST'[代码][代码],[代码][代码]        [代码][代码]uri: event.uri,[代码][代码]        [代码][代码]headers: event.headers ? event.headers : {},[代码][代码]        [代码][代码]body: event.body[代码][代码]    [代码][代码]}).then(body => {[代码][代码]        [代码][代码]return[代码] [代码]body[代码][代码]    [代码][代码]}).[代码][代码]catch[代码][代码](err => {[代码][代码]        [代码][代码]return[代码] [代码]err[代码][代码]    [代码][代码]})[代码][代码]}[代码]3、在小程序中调用云函数请求数据请求 [代码]onLoad: [代码][代码]function[代码][代码](){[代码][代码]    [代码][代码]// 初始化[代码][代码]    [代码][代码]wx.cloud.init()[代码][代码]},[代码][代码]onGetItemList: [代码][代码]function[代码][代码](){[代码][代码]    [代码][代码]wx.cloud.callFunction({[代码][代码]        [代码][代码]name: [代码][代码]'proxy'[代码][代码],[代码][代码]        [代码][代码]data: {[代码][代码]            [代码][代码]// http域名 https域名 第三方域名 非验证域名 IP[:prot] 内网IP或花生壳域名[代码][代码]            [代码][代码]uri: [代码][代码]'http://192.168.1.100:8081'[代码][代码],[代码][代码]            [代码][代码]headers: {[代码][代码]                [代码][代码]'Content-Type'[代码][代码]: [代码][代码]'application/json'[代码][代码]            [代码][代码]},[代码][代码]            [代码][代码]body: {[代码][代码]                [代码][代码]uid: 1[代码][代码]            [代码][代码]}[代码][代码]        [代码][代码]}[代码][代码]    [代码][代码]}).then(res => {[代码][代码]        [代码][代码]console.log(res)[代码][代码]        [代码][代码]const data = res.result[代码][代码]        [代码][代码]console.log(data)[代码][代码]        [代码][代码]// do something[代码][代码]    [代码][代码]})[代码][代码]}[代码]然后你会发现你已经无所不能了。 个人见解，如有不妥之处，望各位大神指正！~

开发工具和iOS测过，android我没测过。。哈哈哈哈哈 https://developers.weixin.qq.com/s/kh8HhjmA7A4D 注释不知道写啥，简单描述了下 [图片]

ps：没有在[代码]swiper[代码]中添加[代码]scroll-view[代码]是为了可以使用页面的下拉刷新，最终方法直接跳到方案四。（含代码片段） 初始方案 [代码]swiper[代码]高度固定，[代码]swiper-item[代码]默认绝对定位且宽高100%，每个[代码]swiper-item[代码]中内容由固定高度的child组成，然后根据child数量动态计算[代码]swiper[代码]高度，初始方案（由于rpx针对屏幕宽度进行自适应，[代码]child_height[代码]使用[代码]rpx[代码]方便child正方形情况下自适应）： [代码]swiper_height = child_height * child_num[代码]屏幕效果仅在宽度375的设备（ip6、ipⅩ）完美契合，其他设备都底部会出现多余空隙，并且在上拉加载过程中，随着内容增加，底部空隙也逐渐变大。 [图片] 方案二 开始以为是[代码]rpx[代码]适配显示问题，后通过文档中描述的WXSS 尺寸单位转化rpx为px（[代码]child_height[代码]使用[代码]rpx[代码]）： [代码]swiper_height = child_height * child_num * ( window_width / 750 )[代码]然后并无变化，我们可以看到[代码]child_height[代码]在不同宽度屏幕下，显示的宽高尺寸是不一样的（[代码]px[代码]单位），那就尝试使用box在各个屏幕的实际高度进行计算[代码]swiper[代码]高度，box的高度可以单独在页面中增加一个固定标签，该标签样式和box宽高保持一致并且隐藏起来，然后在[代码]page[代码]的[代码]onload[代码]中通过wx.createSelectorQuery()获取标签实际高度[代码]baseItemHeight[代码]（[代码]px[代码]单位）： [代码]swiper_height = baseItemHeight * child_num[代码]结果显示原本的ip6、ipⅩ没有问题，另外宽带小于375的ip5上也ok，但是在大于375的设备上还是出现空隙，比如ip的plus系列。 方案三 之前的方案都无法计算出合适的[代码]swiper[代码]高度，那就换个思路，比如去计算空隙的高度。 [代码]swiper[代码]底部有一个load标签显示“加载更多”，该标签紧贴box其后，通过[代码]wx.createSelectorQuery()[代码]来获取[代码]bottom[代码]，然而你会发现[代码]bottom[代码]是标签的[代码]height[代码]加[代码]top[代码]的和。计算底部空隙（暂时忽略“加载更多”标签高度）： [代码]space_height = swiper_height - load_top[代码]刚计算完可以看到在静止状态下，计算出[代码]space_height[代码]拿去修改[代码]swiper_height[代码]显示空隙刚好被清掉了，但是接着就发现在动过程中获取到的[代码]bottom[代码]是不固定的，也就是说数值可能不准确导致[代码]space_height[代码]计算错误，显示效果达不到要求。 方案四 基于上述方案，[代码]swiper[代码]底部的load标签绝对定位[代码]bottom:0[代码]，同时在[代码]swiper[代码]底部添加一个高度为0并且尾随内容box其后的标签（mark），然后获取这两个标签的top值之差： [代码]space_height = load_top - mark_top[代码][图片] 代码片段 这次获取到的空隙高度用于再计算[代码]swiper[代码]高度完美契合，美滋滋！！！