微信小程序实现图片轮播及文件上传
作者: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
标签:微信小程序,图片轮播,文件上传
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python OpenCV简单的绘图函数使用教程
2023-08-02 23:22:22
![](https://img.aspxhome.com/file/2023/7/61197_0s.jpg)
python实现过滤敏感词
2021-02-26 04:23:17
![](https://img.aspxhome.com/file/2023/4/93614_0s.png)
使用python处理一万份word表格简历操作
2021-09-15 17:36:36
![](https://img.aspxhome.com/file/2023/0/72210_0s.jpg)
优化MySQL数据库性能的八大“妙手”
2007-11-18 14:49:00
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2021-08-24 03:26:17
Python中对字典的几个处理方法分享
2021-03-13 05:48:57
SQL Server重温 事务
2024-01-14 21:47:00
使用Python和xlwt向Excel文件中写入中文的实例
2023-08-27 19:18:08
![](https://img.aspxhome.com/file/2023/9/62589_0s.jpg)
pycharm如何设置自动生成作者信息
2021-01-21 22:20:58
![](https://img.aspxhome.com/file/2023/2/83802_0s.jpg)
python匿名函数lambda原理及实例解析
2023-01-05 02:55:07
利用Python判断文件的几种方法及其优劣对比
2022-07-03 06:20:02
tensorflow学习笔记之tfrecord文件的生成与读取
2021-05-24 13:12:43
python实现爬虫统计学校BBS男女比例之数据处理(三)
2022-12-11 18:56:45
![](https://img.aspxhome.com/file/2023/1/75981_0s.jpg)
Python实现圣诞树的多种方法
2023-07-27 01:02:20
![](https://img.aspxhome.com/file/2023/7/61477_0s.jpg)
Python中的多线程实例(简单易懂)
2021-12-07 04:09:47
![](https://img.aspxhome.com/file/2023/7/80447_0s.png)
Vue实现返回顶部按钮实例代码
2024-06-05 09:19:50
opencv+python实现均值滤波
2023-10-21 15:00:58
![](https://img.aspxhome.com/file/2023/2/82532_0s.jpg)
对于Python异常处理慎用“except:pass”建议
2023-01-30 02:30:44
python+os根据文件名自动生成文本
2022-06-12 00:50:48
![](https://img.aspxhome.com/file/2023/1/64731_0s.png)
python 输出上个月的月末日期实例
2022-11-30 16:33:11