简单的siwper效果，又是逛社区发现老哥提的想要该效果，那么有需要，咱们就得上啊： 效果图： [图片] 上代码： wxml [代码]<view class="container"> <swiper duration="200" previous-margin="140rpx" next-margin="140rpx" bindchange="currentHandle" circular="{{true}}" class="swiper-out"> <block wx:for="{{punchList}}" wx:key="*this"> <swiper-item class="swp-item {{current === index ?'active-item': ''}}"> <view class="slide-image" style=" background: url({{item.bannerUrl}}) no-repeat center center;background-size: 100% 100%;" id="{{index}}"></view> </swiper-item> </block> </swiper> <view class="swp-dot"> <view class="square-12 m-r-8 {{current === index ?'active': ''}}" wx:for="{{punchList}}" wx:key="{{index}}"></view> </view> </view> [代码] JS [代码]const app = getApp() Page({ data: { punchList: [{ "bannerUrl": "https://qiniu-image.qtshe.com/1536067857379_122.png" }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068379879_115.png", }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068319939_230.png", }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068074140_695.png", }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068213758_796.png", }], current: 0 }, currentHandle(e) { let { current } = e.detail this.setData({ current }) } }) [代码] wxss [代码].container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100vh; } .slide-image { height: 600rpx; width: 400rpx; margin-top: 20rpx; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10rpx; } .swiper-out { width: 750rpx; height: 660rpx; margin-top: 60rpx; } .active-item .slide-image { box-shadow: 0 5rpx 20rpx 3rpx rgba(0, 0, 0, 0.15); } .swp-item { width: 400rpx; display: flex; flex-direction: column; align-items: center; padding-top: 4rpx; opacity: 0.6; } .active-item { opacity: 1; } .swp-dot { display: flex; justify-content: center; flex: 1; margin-top: 18rpx; } .m-r-8 { margin-right: 8rpx; } .m-l-8 { margin-right: 8rpx; } .square-12 { width: 12rpx; height: 12rpx; background-color: #d8d8d8; border-radius: 6rpx; transition: width 0.2s linear; } .active { background-color: #3c3c3c; width: 36rpx; transition: width 0.2s linear; } [代码] 代码放完了，看下效果吧。代码片段如下： https://developers.weixin.qq.com/s/DCK6HJmw7kaZ

微信小程序中使用swiper组件可以实现图片轮播效果，但是默认swiper高度是固定的150px，如果项目中图片大于固定高度就会被隐藏，所以本篇文章要实现轮播图片的高度自适应。 效果图： [图片] wxml代码： [代码]<[代码][代码]swiper[代码] [代码]class[代码][代码]=[代码][代码]"t-swiper"[代码] [代码]indicator-dots[代码][代码]=[代码][代码]"{{indicatordots}}"[代码] [代码]indicator-active-color[代码][代码]=[代码][代码]"{{color}}"[代码] [代码]autoplay[代码][代码]=[代码][代码]"{{autoplay}}"[代码] [代码]interval[代码][代码]=[代码][代码]"{{interval}}"[代码] [代码]duration[代码][代码]=[代码][代码]"{{duration}}"[代码] [代码]style[代码][代码]=[代码][代码]"height:{{height}}"[代码][代码]>[代码][代码]  [代码][代码]<[代码][代码]block[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{img}}"[代码] [代码]wx:key[代码][代码]=[代码][代码]""[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]swiper-item[代码][代码]>[代码][代码]      [代码][代码]<[代码][代码]image[代码] [代码]src[代码][代码]=[代码][代码]"{{item}}"[代码] [代码]mode[代码][代码]=[代码][代码]"widthFix"[代码] [代码]bindload[代码][代码]=[代码][代码]'goheight'[代码] [代码]/>[代码][代码]    [代码][代码]</[代码][代码]swiper-item[代码][代码]>[代码][代码]  [代码][代码]</[代码][代码]block[代码][代码]>[代码][代码]</[代码][代码]swiper[代码][代码]>[代码]wxss代码： [代码].t-swiper image {[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]}[代码]js代码： [代码]Page({[代码][代码]  [代码][代码]data: {[代码][代码]    [代码][代码]img: [[代码][代码]      [代码][代码]'img/1.jpg'[代码][代码],[代码][代码]      [代码][代码]'img/2.jpg'[代码][代码],[代码][代码]      [代码][代码]'img/3.jpg'[代码][代码]    [代码][代码]],[代码][代码]    [代码][代码]indicatordots: [代码][代码]true[代码][代码],[代码][代码]    [代码][代码]//是否显示面板指示点[代码][代码]    [代码][代码]autoplay: [代码][代码]true[代码][代码],[代码][代码]    [代码][代码]//是否自动切换[代码][代码]    [代码][代码]interval: 5000,[代码][代码]    [代码][代码]//自动切换时间间隔[代码][代码]    [代码][代码]duration: 500,[代码][代码]    [代码][代码]//滑动动画时长[代码][代码]    [代码][代码]color: [代码][代码]'#ffffff'[代码][代码],[代码][代码]    [代码][代码]//当前选中的指示点颜色[代码][代码]    [代码][代码]height: [代码][代码]''[代码][代码]    [代码][代码]//swiper高度[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]goheight: [代码][代码]function[代码] [代码](e) {[代码][代码]    [代码][代码]var[代码] [代码]width = wx.getSystemInfoSync().windowWidth[代码][代码]    [代码][代码]//获取可使用窗口宽度[代码][代码]    [代码][代码]var[代码] [代码]imgheight = e.detail.height[代码][代码]    [代码][代码]//获取图片实际高度[代码][代码]    [代码][代码]var[代码] [代码]imgwidth = e.detail.width[代码][代码]    [代码][代码]//获取图片实际宽度[代码][代码]    [代码][代码]var[代码] [代码]height = width * imgheight / imgwidth + [代码][代码]"px"[代码][代码]    [代码][代码]//计算等比swiper高度[代码][代码]    [代码][代码]this[代码][代码].setData({[代码][代码]      [代码][代码]height: height[代码][代码]    [代码][代码]})[代码][代码]  [代码][代码]}[代码][代码]})[代码]

ios 微信用户在未开启微信运动权限时调用wx.getWeRunData() 会直接弹窗提醒用户开启微信运动， 安卓用户wx.getWeRunData()直接fail 我们小程序没上线只能在本地和体验版上体验 试了几款安卓有微信运动接口的小程序是可以呼起开通微信功能弹窗，所以还请帮忙看下问题： app.js: wx.getSetting({     success: res => {         if (!res.authSetting['scope.werun']) {             wx.authorize({                 scope: 'scope.werun',                 success: res => {                 console.log(res);                 wx.getWeRunData();                 },                 fail: res => {                     console.log(res);                 }             })         }     } }) 使用微信运动的页面js： if (wx.getWeRunData) { // 获取微信步数 wx.getWeRunData({     success(res) {         getSteps(res.encryptedData);     },     fail(res){         wx.showModal({             title: '提示',             content: '开发者未开通微信运动，请关注“微信运动”公众号后重试',             showCancel: false,             confirmText: '知道了'         })     } }) } else { // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示 wx.showModal({     title: '提示',     content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。' }) }