来说下 ,小程序的多媒体组件。源码:https://github.com/limingios/wxProgram.git 中的No.14
可以在小程序嵌入一些音乐,歌曲,mp3什么的
任何小程序中必然会使用图片组件
* video
视频组件,主要视频播放类的
摄像头组件,新版才提供的
直播相关的,跟自媒体有关系,在线直播什么的。
直播相关的,跟自媒体有关系,在线直播什么的。
懒加载比较常用。
<!--pages/image/image.wxml--> <image src='https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18081622'></image> <image src='{{imageSrc}}'></image> <image src='{{imageSrc}}' style='width:200px;height:200pxx'></image> <block wx:for="{{array}}"> <image src='{{imageSrc}}' mode='{{item.mode}}' style='width:250px;height:250x' lazy-load='{{true}}' bindload='load'></image> </block>
// pages/image/image.js Page({ /** * 页面的初始数据 */ data: { imageSrc:'../img/cat.jpg', array: [{ mode: 'scaleToFill', text: 'scaleToFill:不保持纵横比缩放图片,使图片完全适应' }, { mode: 'aspectFit', text: 'aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来' }, { mode: 'aspectFill', text: 'aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来' }, { mode: 'top', text: 'top:不缩放图片,只显示图片的顶部区域' }, { mode: 'bottom', text: 'bottom:不缩放图片,只显示图片的底部区域' }, { mode: 'center', text: 'center:不缩放图片,只显示图片的中间区域' }, { mode: 'left', text: 'left:不缩放图片,只显示图片的左边区域' }, { mode: 'right', text: 'right:不缩放图片,只显示图片的右边边区域' }, { mode: 'top left', text: 'top left:不缩放图片,只显示图片的左上边区域' }, { mode: 'top right', text: 'top right:不缩放图片,只显示图片的右上边区域' }, { mode: 'bottom left', text: 'bottom left:不缩放图片,只显示图片的左下边区域' }, { mode: 'bottom right', text: 'bottom right:不缩放图片,只显示图片的右下边区域' }] }, load: function(e){ console.log(e.detail); }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
PS:image在后续的使用会越来越多,一起学习进步吧。
百度未收录
>>原创文章,欢迎转载。转载请注明:转载自IT人故事会,谢谢!
>>原文链接地址: