微信小程序轮播图渲染（示例）

第一步：utlis下创建的api.js写上封装


const GET = 'GET';
const POST = 'POST';const baseURL = 'https://www.zzgoodqc.cn';//配置的域名function request(method, url, data) {return new Promise(function(resolve, reject) {let header = {'content-type': 'application/json',};wx.request({url: baseURL + url,method: method,data: method === POST ? JSON.stringify(data) : data,header: header,success(res) {console.log(res);//请求成功//判断code是否为0表示成功if (res.data.code == 0) {resolve(res);} else {//其他错误//reject('运行出错,请稍后再试');console.log(res.data.msg);wx.showToast({   //弹出框title: res.data.msg,icon: 'error',duration: 2000});}},fail(err) {//请求失败reject(err)}})})
}const API = {newsList: () => request(GET, `/index.php/index/index/getImgList`),};//接口可以集合到一块，集中管理module.exports = {API: API
}

第二步：mydiv.wxml（写你自己创建的wxml里）:

<view class="parent"><!-- 轮播图 --><swiper bindchange="monitorCurrent" indicator-dots="{{false}}" circular="true" indicator-color="white"indicator-active-color="orange" current="{{current}}" autoplay="{{autoplay}}"><block wx:for="{{obj}}" wx:key="*this"><swiper-item><image class="imgss" src="{{item}}"></image><!-- <view class=""></view> --></swiper-item></block></swiper><!-- 自定义轮播图进度点 --><view class="dots"><block wx:for="{{backgroundArr}}" wx:for-index="index" wx:key="*this"><view class="{{current==index?'active':''}}"></view></block></view>
</view>

第三步：mydiv.wxss:

.parent {position: relative;
}swiper {height: 400rpx;
}swiper-item view {height: 100%;
}.red {background-color: Pink;
}.green {background-color: PaleGreen;
}.blue {background-color: SkyBlue;
}.dots {position: absolute;bottom: 30rpx;display: flex;justify-content: center;align-items: center;width: 100%;
}.dots view {width: 10rpx;height: 10rpx;margin: 0 6rpx;border-radius: 10rpx;background-color: #fff;
}.dots .active {width: 30rpx;background-color: orange;
}
.imgss{width: 750rpx;
}

第四步：mydiv.js

const app = getApp()
const $api = require('../../utils/api').APIPage({/*** 页面的初始数据*/data: {//轮播图的数组backgroundArr: ['red', 'green', 'blue','orange','pink','qqq','wwww'],//轮播图当前的下标current: 0,//是否自动播放轮播图autoplay: false,obj:[]},//监听轮播图的下标monitorCurrent: function (e) {// console.log(e.detail.current)let current = e.detail.current;this.setData({current: current})},/*** 生命周期函数--监听页面加载*/onLoad(options) {$api.newsList().then(res=>{console.log(res.data.data);this.setData({obj:res.data.data})})},/*** 生命周期函数--监听页面显示*/onShow: function () {//开启轮播图this.setData({autoplay: true})},/*** 生命周期函数--监听页面隐藏*/onHide: function () {//关闭轮播图this.setData({autoplay: false})},/*** 生命周期函数--监听页面卸载*/onUnload: function () {//关闭轮播图this.setData({autoplay: false})},})

微信小程序轮播图渲染（示例）相关推荐

微信小程序--轮播图
微信小程序轮播图的实现是利用了swiper组件(滑块视图容器). 主要参数如下: 属性名类型默认值说明 indicator-dots Boolean false 是否显示面板指示点 indica ...
五分钟掌握微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boole ...
微信小程序---轮播图
0. 微信小程序轮播图的实现 a. 是利用了swiper组件滑块视图容器 b. swiper的文档文档https://developers.weixin.qq.com/miniprogram/dev ...
微信小程序轮播图代码
微信小程序轮播图的代码如下: 首先,在小程序的 wxml 文件中,添加如下代码:  <swiper class="swiper" in ...
微信小程序轮播图高度与图片高度不匹配问题
微信小程序轮播图高度与图片高度不匹配问题在微信小程序项目中,为了美观给page设置了padding值,然后让轮播图里面的图片宽度为100%,高度widthFix自适应,出现了如下问题:指示器位置不对 ...
微信小程序轮播中的current_微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boolean ...
微信小程序轮播图放大全屏预览（爆料）
轮播图放大预览效果的实现前言一.wx.previewImage接口API 官方介绍: 代码示例: 二.图片全屏预览 1.效果展示 2.编码 img.wxml img.js img.wxss 三.轮 ...
微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
微信小程序轮播图 swiper图片组件
照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了 ...

微信小程序轮播图渲染（示例）

微信小程序轮播图渲染（示例）相关推荐

最新文章

热门文章