目录
五、for指令
编写goods页面
(1)wxml
内部相当于帮我们做了一个“for item in dataList” 循环
<!--pages/goods/goods.wxml-->
<text>商品列表</text>
<view>
<view wx:for="{{ dataList }}">{{index}}-{{item}}</view>
</view>
<view>
<view wx:for="{{ UserInfo }}">{{index}}-{{item}}</view>
</view>
或
<!--pages/goods/goods.wxml-->
<text>商品列表</text>
<view>
<view wx:for="{{ dataList }}" wx:for-index="idx" wx:for-item="x">{{idx}}-{{x}}</view>
</view>
<view>
<view wx:for="{{ UserInfo }}" wx:for-index="idx" wx:for-item="x">{{idx}}-{{x}}</view>
</view>
(2)js
// pages/goods/goods.js
Page({
/**
* 页面的初始数据
*/
data: {
dataList: ["输入","色佛诞日","生日歌"],
UserInfo: {
name:"alex",
age: 18,
gender: false
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
展示效果:
六、上传图片
编写home页面:
(1)wxml
<!--pages/home/home.wxml-->
<view class="menu">
<view class="item">
<image src="/static/link-01.png"></image>
<text>精品</text>
</view>
<view class="item">
<image src="/static/link-01.png"></image>
<text>精品</text>
</view>
<view class="item">
<image src="/static/link-01.png"></image>
<text>精品</text>
</view>
<view class="item">
<image src="/static/link-01.png"></image>
<text>精品</text>
</view>
</view>
<navigator url="/pages/list/list?id=566">跳转页面</navigator>
<view bindtap="uploadImage">请上传图片:</view>
<view class="images">
<image wx:for="{{images}}" src="{{item}}"></image>
</view>
(2)js
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
images: ["/images/link-01.png","/images/link-02.png","/images/默认头像.jpeg"]
},
uploadImage() {
wx.chooseImage({
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success:function(res) {
console.log(res)
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
(3)wxss
/* pages/home/home.wxss */
image {
width: 100rpx;
height: 100rpx;
border-radius: 50rpx;
}
.menu {
display: flex;
/* 在水平方向排列 ,规定主轴方向*/
flex-direction: row;
/* 元素在水平方方向如何展示,规定在主轴方向如何展示:center */
justify-content: space-around;
}
.menu .item {
display: flex;
flex-direction: column;
align-items: center;
}
.images {
width: 200rpx;
height: 200rpx;
padding: 5rpx;
}
展示效果:
(1)点击“请选择图片”之后,会弹出一个选择页面 ,
(2)在弹出的选择页面 ,选择图片之后,console中会打印出选择的图片信息。
展示效果优化1:
(3)此时,我们修改uploadImage()函数,为了可以使我们选择的图片上传展示到页面上,
data: {
images: ["/images/link-01.png","/images/link-02.png","/images/默认头像.jpeg"]
},
uploadImage() {
var that = this
wx.chooseImage({
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success:function(res) {
console.log(res)
that.setData({images: res.tempFilePaths})
}
})
},
(4)重新编译,点击“请选择图片”之后,在弹出的选择页面选择图片,
点击“打开”之后,页面的展示效果为,
展示效果优化2:
(3)此时,我们修改uploadImage()函数,为了可以使我们选择的图片可以上传展示到页面已有的图片之后,
data: {
images: ["/images/link-01.png","/images/link-02.png","/images/默认头像.jpeg"]
},
uploadImage() {
var that = this
wx.chooseImage({
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success:function(res) {
console.log(res)
// 设置images,页面上的图片自动修改
// that.setData({images: res.tempFilePaths})
// 默认图片 + 选择的图片
that.setData({images: that.data.images.concat(res.tempFilePaths)})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
(4)重新编译,点击“请选择图片”之后,在弹出的选择页面选择图片,
点击“打开”之后,页面的展示效果为,