微信小程序实现图片轮播及文件上传
作者:lqh 发布时间:2023-09-05 00:12:52
标签:微信小程序,图片轮播,文件上传
微信小程序实现图片轮播及文件上传
刚刚接触微信小程序,看着网上的资源写了个小例子,本地图片轮播以及图片上传。
图片轮播:
index.js
<span style="font-size:14px;">var app = getApp()
Page({
data:{
mode: 'aspectFit',
// src:'../images/timg1.jpg',
imgUrls:[
'../images/1.jpg',
'../images/2.jpg',
'../images/3.jpg',
'../images/4.jpg'
],
indicatorDots: true, //是否出现焦点
autoplay: true, //是否自动播放
interval: 2000, //自动播放时间间隔
duration: 1000, //滑动动画时间
userInfo: {}
},
onLoad:function(){
console.log('onLoad Test');
}
})</span>
注:imgUrls中为本地图片数组。
index.wxml:
<swiper indicator-dots = "{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item class="swiper_i">
<image src="{{item}}" mode="{{mode}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
index.json:
{
"navigationBarTitleText": "相册"
}
index.wxss:
.slide-image{
width:100%;
height:100%;
}
.swiper_i{
text-align: center;
width:100%;
}
好了,这是图片轮播的几个文件。会在app.json中配置。
接下来是图片上传的。因为没有服务器,暂时不能上传,但是可以从本地相册或拍照获取照片。
upload.js:
var app = getApp()
Page({
data:{
// text:"这是一个页面"
source: '',
tt:false
},
/**
* 选择相册或者相机 配合上传图片接口用
*/
onLoad: function() {
var that = this;
wx.chooseImage({
count: 1,
//original原图,compressed压缩图
sizeType: ['original'],
//album来源相册 camera相机
sourceType: ['album', 'camera'],
//成功时会回调
success: function(res) {
//重绘视图
that.setData({
source: res.tempFilePaths,
tt:true
})
/* var tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: 'https://', //仅为示例,非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData:{
'user': 'test'
},
success: function(res){
var data = res.data
//do something
}
})*/
}
})
},
/*onHide:function(){
this.setData({
source:''
})
}*/
})
upload.json:
{
"navigationBarTitleText": "上传图片"
}
upload.wxml:
<view class="Container">
<image src="{{source}}" mode="aspectFit" class="image-i"/>
<block wx:if="{{tt}}">
<button type="primary" bindtap="listenerButtonChooseImage">确认上传</button>
</block>
</view>
upload.wxss:
/* pages/upload/upload.wxss */
.Container{
text-align:center;
width:100%;
}
.image-i{
width:100%;
height:100%;
}
app.js为空。
app.json:
{
"pages": [
"pages/index/index",
"pages/upload/upload"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演示2",
"navigationBarBackgroundColor": "#fbf9fe",
"backgroundColor": "#fbf9fe"
},
"networkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "显示图片",
"iconPath": "pages/images/icon_API.png",
"selectedIconPath": "pages/images/icon_API_HL.png"
},{
"pagePath": "pages/upload/upload",
"text": "上传",
"iconPath": "pages/images/icon_API.png",
"selectedIconPath": "pages/images/icon_API_HL.png"
}]
},
"debug": true
}
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
来源:http://blog.csdn.net/xixiAlly/article/details/54377302?locationNum=1&fps=1
0
投稿
猜你喜欢
- 上次 li 把 dl 模拟了~dl不知道要干什么了:green:~找了ol一起来做复合列表~:这个练习除了css外~外加用了点JS :shi
- 文通过一个操作实例来说明SQL中主标识列IDENTITY的使用技巧。要求:在 sql server 2005中,建立数据表book,在表bo
- b 和 i 标签在现在的 Web 标准潜规则中是不推荐使用,甚至是反对使用的,因为认为他们只是“表现”粗体和斜体,而没有任何“语义”。更多的
- Internet Explorer 8 Beta 测试了一年多之后,今天,IE8 终于发布了。它绝对好过 IE7,还有一些不错的新功能,如
- Oracle 数据库启动Oracle shutdown的时候突然断电,导致使用sql/plus启动时无法连接到数据库,具体描述为: conn
- 百度有啊2009年情人节logo——大纸袋GG给大纸袋MM送了枝玫瑰花,大纸袋MM奖励了大纸袋GG一个吻,好可爱!淘宝网2009年情人节lo
- 概要:Oracle关系数据库系统以其卓越的性能获得了广泛的应用,而保证数据库的安全性是数据库管理工作的重要内容。本文是笔者在总结Oracle
- 在运用xmlhttp组件编写程序中,会碰到 "msxml3.dll 错误 ‘800c0005’&nb
- 在JavaScript中,我们应该尽可能的用局部变量来代替全局变量,这句话所有人都知道,可是这句话是谁先说的?为什么要这么做?有什么根据么?
- 索引( Index )是常见的数据库对象,它的设置好坏、使用是否得当,极大地影响数据库应用程序和Database 的性能。虽然有许多资料讲索
- 1. 简介本文将介绍 Go 语言中的 sync.Cond 并发原语,包括 sync.Cond的基本使用方法、实现原理、使用注意事项以及常见的
- 背景背景是这样的, 我的家里台式机常年 休眠, 并配置了 Wake On Lan (WOL) 方便远程唤醒并使用.但是我发现, 偶尔台式机会
- 联合结果集 新建临时工数据表 代码如下:CREATE TABLE T_TempEmployee (FIdCardNumber VARCHAR
- set oSQLServer =server.createobject("SQLDMO.SQLServer")oSQLS
- 本文旨在分类讲述执行计划中每一种操作的相关信息。数据访问操作 首先最基本的操作就是访问数据。这既可以通过直接访问表,也可以通过访问索引来进行
- 上期回顾:亚马逊购物用户体验分析 (二)方便的导航元素任何网上商店的成功,至关重要的一点,就是用户可以简单轻松地使用导航条。基本店铺分类,用
- 在ASP中,你可通过VBScript和其他方式调用自程序。实例:调用使用VBScript的子程序如何从ASP调用以VBScript编写的子程
- 保持良好的代码风格是每个Coder必学的课程,同样在HTML设计的时候也要特别注意代码的规范性,虽然说不规范的代码不会直接造成严重的后果,但
- 昨天又翻了下前段时间WD内部培训的幻灯片,发现了kejun推荐的一篇好文:Javascript Closures,看了之后受益匪浅。这篇文章
- 一个很棒的 blog 文章,是 PPK 两年前写的,文章中解释了 contains() 和 compareDocumentPosition(