.swan

        <!-- 轮播图S -->
<view class="swiper-box">
<swiper class="banner" style='height:{{swiperH}}' bindchange="swiperChange" autoplay="true" interval="3000" duration="500"
circular="true">
<block s-for="banner" s-for-index="index" s-for-item="item">
<swiper-item>
<image src="{{item.cover_id}}" class="slide-image" mode="widthFix" bindload='imgHeight' />
</swiper-item>
</block>
</swiper>
<view class="dots">
<block s-for="banner" s-for-index="index" s-for-item="item">
<view class="dot {{index == swiperCurrent ? 'active' : ''}}"></view>
</block>
</view>
</view>
<!-- 轮播图E -->

.css

/* 轮播图 S*/
.slide-image{width: 100%;}
/* 圆点样式控制 S*/
.swiper-box{position: relative; width: 100%;}
.dots{position: absolute; left:; right:; bottom:; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10rpx 0; background: rgba(0, 0, 0, .2)}
.dots .dot{margin: 0 8rpx; width: 14rpx; height: 14rpx; background: rgba(255,255,255,.8); border-radius: 8rpx; -webkit-transition: all .6s; transition: all .6s;}
.dots .dot.active{width: 40rpx; background: #ef782c;}
/* 圆点样式控制 E*/
/* 轮播图 E*/

.js

 const app = getApp();
Page({
data: {
banner: [],//轮播图
swiperCurrent: "",//轮播图圆点
swiperH: "", //这是swiper框要动态设置的高度属性
},
onLoad: function () {
// 监听页面加载的生命周期函数
this.getBanner();
},
onReady: function() {
// 监听页面初次渲染完成的生命周期函数
},
onShow: function() {
// 监听页面显示的生命周期函数
app.setInfo();
},
onHide: function() {
// 监听页面隐藏的生命周期函数
},
onUnload: function() {
// 监听页面卸载的生命周期函数
},
onPullDownRefresh: function() {
// 监听用户下拉动作
},
onReachBottom: function() {
// 页面上拉触底事件的处理函数
},
onShareAppMessage: function () {
// 用户点击右上角转发
},
swiperChange: function (e) {
this.setData({
swiperCurrent: e.detail.current //获取当前轮播图片的下标
})
},
imgHeight: function (e) {
var winWid = swan.getSystemInfoSync().screenWidth;
var imgh = e.detail.height;//图片高度
var imgw = e.detail.width;//图片宽度
var swiperH = winWid * imgh / imgw + "px";
//等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度 ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
this.setData({
swiperH: swiperH//设置高度
});
},
getBanner: function () {//获取banner轮播图
var that = this;
swan.request({
url: app.globalData.baseUrl + 'list/banner',
method: 'GET',
header: {
genToken: app.globalData.genToken,
},
success: function (res) {
// console.log(res);
that.setData({
banner: res.data.lines
})
// console.log(that.data.banner)
}
});
}
});

效果图

百度小程序-swiper组件的更多相关文章

  1. 百度小程序-map组件定位

    给客户开发一个百度小程序,有个地图定位显示.百度小程序内置的api地图是不准的,通过百度一下,查询到坐标偏移算法公式,自己项目中使用,手机测试坐标已经正常显示! 经纬度,通过百度坐标拾取器拾取到! . ...

  2. 基于angular实现模拟微信小程序swiper组件

    这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组 ...

  3. 小程序swiper组件高度自适应【转载】

    最近在做小程序开发,复制官方文档上的swiper组件实测后发现,图片不能自适应.网上找了几个版本测试都发现存在一些小问题,目前这个版本本人实测是最好用的.记录一下,方便日后使用. 感谢原创大神的帮助, ...

  4. 跳坑 小程序swiper组件 轮播图片 右边空白问题

    swiper 组件 设置轮播图片时,右侧会出现空白的情况:是因为 swiper组件有默认的 高度和宽度,所以我们在设置图片高度和宽度的同时, 也要为 设置高度和宽度,和高度和宽度样式一样的就可以.

  5. 微信小程序 swiper 组件坑

    swiper 组件高度被限制为150px了,所以内容无法撑开. 解决办法 给这组件重新设置个高度,然后在把里面的图片设置为自动适应容器大小.图片模式设置为 宽度不变 自动适应高度 <swiper ...

  6. 小程序swiper组件的bindchange方法重复执行问题

    这是官方文档的说法给出了swiper组件一直来回滑动的bug原因 以下是修正方法 <swiper autoplay="{{autoplay}}" interval=" ...

  7. 微信小程序--swiper组件

    <view class='swiper-container'> <swiper indicator-dots="true" autoplay=" ver ...

  8. 第五篇、微信小程序-swiper组件

    常用属性: 效果图: swiper.wxml添加代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{ ...

  9. 微信小程序swiper组件实现图片宽度自适应

    wxml 代码: <!--pages/swipe/swipe.wxml--> <view> <swiper circular="true" indic ...

随机推荐

  1. [CSP-S模拟测试]:Seat(概率DP+数学)

    题目描述 有$n+2$个座位等距地排成一排,从左到右编号为$0$至$n+1$.最开始时$0$号以及$n+1$号座位上已经坐了一个小$G$,接下来会有$n$个小$G$依次找一个空座位坐下.由于小$G$们 ...

  2. 各操作系统下php.ini文件的位置在哪里

    这个问题虽然说很小,但是却还是经常会出现的问题,特别是刚入门php的同学更是如此.而这个问题呢,我也经常被问到,所以就在这里总结一下. 首先php.ini文件并不是隐藏文件,寻找php.ini文件的方 ...

  3. Linux shell - scp命令用法

    例子: 远程复制一个文件从服务器A (172.0.0.0) /home/test/file1.txt 到 服务器B (172.0.0.1) /home/test 服务器A和服务器B的用户是 test ...

  4. 多行文本溢出隐藏处理,兼容ie,火狐

    问题 多行文本溢出隐藏,webkit内核浏览器如谷歌支持如下写法: overflow: hidden; text-overflow: ellipsis; display: -webkit-box; - ...

  5. p5405 [CTS2019]氪金手游

    题目大意 题意狗屁不通 看毛子语都比看这个题面强 分析 我们假设这棵树是一个内向树 那么我们可以轻易的得到dp[x][i]表示x点子树和为i的期望 转移只需枚举当前期望大小和子树期望大小即可 但是由于 ...

  6. 【转】 C语言深度解剖读书笔记(1.关键字的秘密)

    本文出处:http://blog.csdn.net/mbh_1991/article/details/10149805 开始本节学习笔记之前,先说几句题外话.其实对于C语言深度解剖这本书来说,看完了有 ...

  7. SHELL脚本里执行的东西需要多次回车确认,怎么实现自动回车确认?

    写了个自动配置的shell脚本,其中有几行是 …… ./build-key-server ./build-key-client …… 在执行build-key-server和build-key-cli ...

  8. 【转】时间序列分析——基于R,王燕

    <时间序列分析——基于R>王燕,读书笔记 笔记: 一.检验: 1.平稳性检验: 图检验方法:     时序图检验:该序列有明显的趋势性或周期性,则不是平稳序列     自相关图检验:(ac ...

  9. tomcat中的server.xml文件配置了URIEncoding="UTF-8"需要注意的问题

    1.      get请求传递中文时本地连正式库访问都正常,正式环境下单独访问报错 代码: 请求:project/projectInfo/export/?cks=’项目类型 public String ...

  10. mac安装pip并升级pip版本

      最近想安装inchat,直接使用命令pip install install,结果提示 使用提示中的命令升级,结果提示找不到pip.很郁闷,明明有pip,结果一升级还给升没了.最后用的是这个方法完美 ...