小程序 swiper banner 图片 居中
var imgUrlApp = getApp().globalData.imgUrlApp;
Page({
/**
* 页面的初始数据
*/
data: {
indicatorDots: true,
vertical: false,
autoplay: false,
circular: false,
interval: 2000,
duration: 500,
previousMargin: 0,
nextMargin: 0,
imgUrlApp: imgUrlApp,
swiperimgUrls: ['http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
],
userinfo: {},
companyinfo: {}
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
console.log(
wx.getStorageSync("username")),
wx.request({
url: getApp().globalData.apiUrlApp + 'acc/get_userinfo/',
header: {
"Content-Type": "application/x-www-form-urlencoded",
'cookie': wx.getStorageSync("username"), //读取cookie,
'cookie': wx.getStorageSync("uid"), //读取cookie,
'cookie': wx.getStorageSync("gid") //读取cookie, },
method: "GET",
data: {
username: wx.getStorageSync("username")
},
success: function(res) {
console.log(res)
if (res.data.status == 1) {
wx.showToast({
// title: res.data.info,
title: "帐号详情",
icon: 'success',
duration: 1500
}),
that.setData({
userinfo: res.data.data
}),
wx.request({
url: getApp().globalData.apiUrlApp + 'common/get_orginfo/',
header: {
"Content-Type": "application/x-www-form-urlencoded",
'cookie': wx.getStorageSync("username"), //读取cookie,
'cookie': wx.getStorageSync("uid"), //读取cookie,
'cookie': wx.getStorageSync("gid") //读取cookie, },
method: "GET",
data: {
uid: wx.getStorageSync("uid")
},
success: function(res) {
console.log(res)
if (res.data.status == 1) {
wx.showToast({
// title: res.data.info,
title: "帐号详情",
icon: 'success',
duration: 1500
}),
that.setData({
companyinfo: res.data.data
})
} else if (res.data.status == 0) {
wx.showToast({
title: "无数据返回",
icon: 'success',
duration: 1500
})
} else if (res.data.status == -1) {
wx.showToast({
title: "请求异常,请检查重试",
icon: 'loading',
duration: 2000
})
}
}
})
} else if (res.data.status == 0) {
wx.showToast({
title: "无数据返回",
icon: 'success',
duration: 1500
})
} else if (res.data.status == -1) {
wx.showToast({
title: "请求异常,请检查重试",
icon: 'loading',
duration: 2000
})
}
}
})
}, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function() { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function() { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function() { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function() { }, onShow: function() {
// 页面显示
},
onHide: function() {
// 页面隐藏
},
onUnload: function() {
// 页面关闭
},
})
@import "../../style/weui.wxss";
<view class="mainpage">
<view class="banner">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}" interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
<block wx:for="{{swiperimgUrls}}" wx:key="*this">
<swiper-item>
<image src="{{item}}" class="slide-image" style="width:100%" />
</swiper-item>
</block>
</swiper> </view>
小程序 swiper banner 图片 居中的更多相关文章
- 微信小程序 swiper 显示图片计数 当前/总数
<view class="swiperContainer"> <swiper bindchange="swiperChange" autopl ...
- 微信小程序swiper实现 句子控app首页滑动卡片
微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- 微信小程序swiper高度自适应,swiper的子元素高度不固定
小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
Visual Studio 2017中使用正则修改部分内容 最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效 ...
- 小程序swiper实现订单页面
小程序swiper实现订单页面 myOrder.wxml <!--pages/myorder/myorder.wxml--> <view class="swiper-tab ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- 小程序 swiper 轮播图滚动图片 + 视频
直奔代码主题wxml: <view class="test_box"> <swiper indicator-dots="{{indicatorDots} ...
- 微信小程序swiper 前后边距的使用
小程序中有一个组件swiper 就是滑块视图容器 其中提供了两个属性 previous-margin:前边距,可用于露出前一项的一小部分 next-margin:后边距,可用于露出后一项的 ...
随机推荐
- 【leetcode 字符串】466. Count The Repetitions
https://leetcode.com/problems/count-the-repetitions/description/ 找循环节 https://www.cnblogs.com/grandy ...
- 【bzoj4320】【ShangHai2006 Homework】【并查集+离线处理】
ShangHai2006 Homework Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 918 Solved: 460[Submit][Statu ...
- kubernetes---CentOS7安装kubernetes1.11.2图文完整版
转载请注明出处:kubernetes-CentOS7安装kubernetes1.11.2图文完整版 架构规划 k8s至少需要一个master和一个node才能组成一个可用集群. 本章我们搭建一个mas ...
- 线段树练习5(codevs 4927)
题目描述 Description 有n个数和5种操作 add a b c:把区间[a,b]内的所有数都增加c set a b c:把区间[a,b]内的所有数都设为c sum a b:查询区间[a,b] ...
- 维修队列(bzoj 1500)
Description Input 输入的第1 行包含两个数N 和M(M ≤20 000),N 表示初始时数列中数的个数,M表示要进行的操作数目.第2行包含N个数字,描述初始时的数列.以下M行,每行一 ...
- 洛谷 [P1290] 欧几里得的游戏
SG函数的应用 看到这题就想到了SG函数 那么可以考虑最终情况:一个数是x,另一个是0,那么先手必败(因为上一个人已经得到0了,其实游戏已经结束了) 剩下的情况:一个数n, 一个数m,假设n>m ...
- msp430项目编程47
msp430综合项目---有线采集传输平台系统47 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结
- 转载自csdn http://blog.csdn.net/ithomer/article/details/6035627 Vim的分屏功能
Vim的分屏功能 目录(?)[+] 本篇文章主要教你如何使用 Vim 分屏功能 分屏启动Vim 使用小写的o参数来上下分屏(横向分屏). vim -on file1 file2 ... 使用大写的O参 ...
- Linux 下MySQL 安装与卸载
这个写的比较好:http://www.cnblogs.com/starof/p/4680083.html 2.卸载系统自带的Mariadb rpm -qa|grep mariadb / ...
- FFT/NTT模板 既 HDU1402 A * B Problem Plus
@(学习笔记)[FFT, NTT] Problem Description Calculate A * B. Input Each line will contain two integers A a ...