电子商务网站建造怎样设计—微信小程序设置图

2021-03-25 16:17| 发布者: | 查看: |


今天详尽详细介绍一个让相片在一切容器都坚持不懈锲而不舍固定不动没动占有率的方法。阜阳手机微信微信小程序制作全身心于房屋朝向手机上手机微信手机微信微信小程序、百度搜索检索手机微信微信小程序(智能化化手机微信微信小程序)、支付宝手机微信微信小程序、今日今天今日头条手机微信微信小程序、QQ微网页页面(即QQ手机微信微信小程序)、抖音短视频小视频手机微信微信小程序、快应用(手机上上生产制造商依据硬件配置配备综合服务平台互相公布的新型应用)等手机微信微信小程序开发设计设计方案者与顾客提供手机微信微信小程序相关开发设计设计方案技术性性、制犯实例、方法发放、流量转现、生产制造制造行业新闻报道新闻资讯等信息内容內容的发布与散布服务。
[标识:內容1]
有时候候大家的相片实际上并不是同一个占有率,可是大家必须设置相片坚持不懈锲而不舍一个固定不动没动的占有率,在手机微信微信小程序里面因为总宽固定不动没动为750rpx,因而大家假若必须设置宽高之比2 : 1的话马上设置 ..
今天详尽详细介绍一个让相片在一切容器都坚持不懈锲而不舍固定不动没动占有率的方法。阜阳手机微信微信小程序制作全身心于房屋朝向手机上手机微信手机微信微信小程序、百度搜索检索手机微信微信小程序(智能化化手机微信微信小程序)、支付宝手机微信微信小程序、今日今天今日头条手机微信微信小程序、QQ微网页页面(即QQ手机微信微信小程序)、抖音短视频小视频手机微信微信小程序、快应用(手机上上生产制造商依据硬件配置配备综合服务平台互相公布的新型应用)等手机微信微信小程序开发设计设计方案者与顾客提供手机微信微信小程序相关开发设计设计方案技术性性、制犯实例、方法发放、流量转现、生产制造制造行业新闻报道新闻资讯等信息内容內容的发布与散布服务。阜阳手机上手机微信手机微信微信小程序它可以手中机手机微信内被便捷便捷地得到和散布,顾客随时随地随地可用,用完即走,进行了应用“近在眼前”的理想化。
有时候候大家的相片实际上并不是同一个占有率,可是大家必须设置相片坚持不懈锲而不舍一个固定不动没动的占有率,在手机微信微信小程序里面因为总宽固定不动没动为750rpx,因而大家假若必须设置宽高之比2 : 1的话马上设置相片css的宽为一个固定不动没动值,随后高为固定不动没动值一半便可以了了。那般没有同的显示信息屏下都能坚持不懈锲而不舍设定的占有率。
可是那般实际上并不是很方便快捷,例如我认为封裝一个自定构件,作为文件目录的Cell(我是iOS开发设计设计方案来着。阜阳手机微信微信小程序开发设计设计方案集手机微信微信小程序开发设计设计方案、制作、发放、营销推广营销推广、交易、生产制造制造行业新闻报道新闻资讯等服务于一体的综合性性门户网网网站。阜阳手机微信微信小程序制作全身心于房屋朝向手机上手机微信手机微信微信小程序、百度搜索检索手机微信微信小程序(智能化化手机微信微信小程序)、支付宝手机微信微信小程序、今日今天今日头条手机微信微信小程序、QQ微网页页面(即QQ手机微信微信小程序)、抖音短视频小视频手机微信微信小程序、快应用(手机上上生产制造商依据硬件配置配备综合服务平台互相公布的新型应用)等手机微信微信小程序开发设计设计方案者与顾客提供手机微信微信小程序相关开发设计设计方案技术性性、制犯实例、方法发放、流量转现、生产制造制造行业新闻报道新闻资讯等信息内容內容的发布与散布服务。。),我唯一设置文件目录的总宽,Cell里面相片总宽跟高度就定出去了。
最开始我百度搜索检索到二种方法:

一、开启js具体实际操作DOM
在手机微信微信小程序内没法怎奈马上具体实际操作DOM,可是手机上手机微信也是出示了插孔的:wxml联接点信息内容內容API
1.不封裝构件时,大家可能在js文本文档中的onShow方法中应用:
onShow: function() {
var that = this
var query = wx.createSelectorQuery()
query.select("#image").boundingClientRect(function(res) {
console.log(res.width)
that.setData({
height: res.width * 0.5 + 'px'
})
}).exec()}
在css中设置相片的宽width:100%,在wxml中设置相片:
image id='image' src='{{imageUrl}}' mode='aspectFill' /image
这时候,当我们们设置相片父正视图的宽为随便值,相片全是坚持不懈锲而不舍2:1的占有率。
2、在自定构件中,大家必须在ready方法中应用:
ready:function() {
var that = this
var query = wx.createSelectorQuery().in(this) //这儿多了in(this)
query.select("#image").boundingClientRect(function(res) {
console.log(res.width)
that.setData({
height: res.width * 0.5 + 'px'
})
}).exec()}
构件内CSS跟WXML中设置紧随方一样。
这儿有一个封裝好的构件的简单DEMO:
将封裝好的构件放入scrollView内
将封裝好的构件放入文件目录页内
唯一设定好构件的款式,里面相片以及内容都能完美适配。

二、应用padding-bottom,overflow结合,具体参考这篇blog.
我冲着做了,欠佳危害也出来了,可是当我们们放入scrollView中时,因为相片太高了(诚然看不出来来来),只是被隐藏了,因而导致scrollView被撑得十分高,仅有设置scrollView的高度才可以畸形显示信息信息内容,但这时候又看上去不够动态性性了,因而我放弃了这种方法,明显强烈推荐大家应用第一种。
上一篇: 下一篇:

<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部