速卖通产品描述中的8个关联产品模块如何居中？
UID：1358089
铜币163威望119贡献值0
速卖通产品描述中的8个关联产品模块如何居中？
【速卖通创业交流QQ群：】
UID：1045829
铜币1125威望873贡献值0
用户被禁言,该主题自动屏蔽!
UID：1208431
铜币101威望101贡献值0
亲们，你还在为发货渠道忧愁吗？你希望更快让运单号上网吗？你想走更低价格的中国邮政小包吗？请加入中国邮政小包超级QQ群&
UID：214773
铜币2威望2贡献值0
我也遇到同样的问题，我插入关联产品后，他总是在产品描述的最上面，无法按移到其他地方，而已布局不整齐，8个产品总是至少分三行布局很难看，请问高手如何处理？
UID：1399241
铜币267威望267贡献值0
用户被禁言,该主题自动屏蔽!
UID：1691379
铜币6威望1贡献值0
UID：345707
铜币20威望18贡献值0
楼主解决了吗，告诉我一下
UID：1953699
铜币25威望10贡献值0
请问大神们，怎么添加关联产品啊~怎么我每次添加就只有链接没有图片呢
UID：2034999
铜币36威望6贡献值0
用插入模块。。但是这种只能指定某一部分产品，要建立很多模块，也很麻烦，我试过插入表格，再在表格中插入产品，但是要调，也麻烦，不能居中是问题，楼主有解决方法也告诉我一下
UID：2073362
铜币73威望57贡献值0
详情页关联营销有通用模块功能吗？就像淘宝天猫那样，然后单款宝贝详情页的时候可以关联这个模块？否则一个系列如果产品多了共用一个关联营销的话，加起代码来工作量太耗时间了
一入电商深似海，从此节操是路人！
UID：2145188
铜币6威望1贡献值0
Sino Market
UID：436367
铜币745威望303贡献值0
&&&&&& 其实你随便问一个IT开发的都知道，或者做WEB前端的，在代码中加入一个DIV 然后属性中居中就OK ~~&&&&请叫我雷锋 然后加分~~~
世有无情人 却有深情妖
UID：436367
铜币745威望303贡献值0
我去~~13年的帖子
世有无情人 却有深情妖
UID：2449651
铜币1威望1贡献值0
雷锋请问DIV是加到代码最前端吗？产品都是在左边的&
UID：2447910
铜币247威望217贡献值0
大家可以试用速卖通的第三方软件进行优化产品提升销量，我向大家推荐一个软件。旺销王，新注册的用户还是可以试用7天的，非常好用的一款软件。旺销王：smt.wxwgood.com/?f=3
UID：2190289
铜币16威望11贡献值0
UID：2489467
铜币2549威望2515贡献值0
用户被禁言,该主题自动屏蔽!
UID：3015708
铜币1威望1贡献值0
13年的帖子，现在都快18年了，阿里依然没有对这个问题优化，这是要逼死处女座的节奏。&如果以前有代码，或者还能实现。现在速卖通都取消了代码编辑，非常死板。&加上移动端的兼容性不够，PC端和移动端看到的页面的内容排序都是不一样的。&关联产品这个模块，在PC端死磕靠左，在移动端也是死磕靠左，还2*4 格式，4行，每行2个，又长又臭。&如果先在阿里国际站弄单以个只有一个单元格的表格，然后居中处理后复制过来，接着把关联产品模块放进那个单元格里面，这种居中可以实现，把这个单元格的列宽设置成950就行了。不过如果去移动端里面看的话，手机移动端只显示单屏的，买家看这个表格还要横拉才能看完，非常影响体验。&凡是PC端发产品的时候，里面有表格的，宽度大于300左右的，都会硬生生拉宽，于是你之前设计的950宽度的小横幅和图片什么的，就非常尴尬地集体靠左排列，如果你集体居中的话，文字就变成犬牙交错了。&这是真心要逼死咱们处女座的节奏。
UID：1494746
铜币494威望484贡献值0
NANANANANANAN
访问内容超出本站范围，不能确定是否安全
您目前还是游客，请
批量上传需要先选择文件，再选择上传
&回复后跳转到最后一页您已成功签到，并增加了15个金币！
您现在的位置：
关于微信小程序，那些开发文档没有告诉你的
发布人：微信群& / &发布时间： 23:19:49&& 热度：1880
本文由广研微信小程序的开发团队所做，作者为UI开发工程师王婷婷。本文从UI开发的角度，结合OM小程序的案例，剖析小程序的组件用法与传统HTML5标签的区别。小程序与传统HTML5的区别小程序刚开放公测，互联网圈内开始..
本文由广研小程序的开发所做，作者为UI开发王。本文从UI开发的角度，结合OM小程序的案例，剖析小程序的组件用法与传统HTML5标签的区别。小程序与传统HTML5的区别小程序刚公测，圈内了解读和猜测。其中有观点认为小程序和HTML5有着紧密关联，甚至小程序于HTML5开发。;经过仔细研究文档和代码开发，从视图层的角度来说，小程序与传统HTML5有明显的区别，区别在于：开发工具不同。;区别于H5的开发工具+浏览器Device Mode预览的，小程序的开发于的开发者工具，实现同步文件+开发调试+编译+预览++发布等一整套流程。开发语言不同。&小程序开发了一套WXML标签语言和WXSS样式语言，并非直接使用标准的HTML5+CSS3。组件封装不同。&小程序独立出来了很多原生的组件，在HTML5模拟实现的，小程序里直接调用组件。小程序开发者工具小程序的开发工具，基于MINA框架（现已取消该名称），现在公布的工具名为微信web开发者工具。小程序开发工具是一种基于Native System层的框架，由于并非运行在浏览器中，所以JavaScript在web中的一些诸如Document、Window等使用。&从执行的方面，普通HTML5和小程序有不同呢，用一张图表表示下：传统HTML5在加载的时候受限于网络环境，顺序加载HTML、CSS、JS，然后返回，最后渲染页面显示在浏览器中。经常需要等待很长，会受到影响。相比之下，小程序的两个线程：Appservice Thread和View Thread会同时进行、并行加载，甚至Appservice Thread会更早执行，当视图线程加载完，通知Appservice，Appservice 会把准备好的用setData的返回给视图线程。小程序的这种优化策略，可以减少的等待、加快小程序的响应。WXML1、标签&WXML在语法上更接近XML语言，遵循SGML，区别于HTML语言的标签闭合方式，WXML语言必须包括标签和结束标签，以image标签为例，以下2种写法都支持：&image src="" /&or&image src="" &&/image&需要注意的是：&所有组件与属性小写，以连字符-连接。2、文件引入&WXML两种文件引入方式，import和include。区别在于：import可以引入定义好的template模板，模板是有域的；而include拷贝公用的代码片段到目标文件中，适合做公共页面片的拆分。&!--import--&&import src="../template/a.wxml"/&&!--include--&&include src="../include/footer.wxml"/&文件引入在小程序做模块化拆分的过程中非常。WXSS1、尺寸单位&WXSS支持的单位有px、rem和rpx，其中rem和rpx可以针对屏幕容器进行适配，px则为尺寸。&其中1rpx=0.5px，在WXSS和WXML中定义的rpx单位会转换为在端可以识别的rem单位。&建议：开发微信小程序时师可以用 6 作为稿的标准。&所以拿到750的稿，在PS中量取的容器，可以直接定义为rpx，不需要进行2倍尺寸的换算。view{& & font-size:26& & width:& & height:}备注：rpx的单位不光在样式中会自适应，写在WXML的style里也会根据屏幕自适应。2、样式引入&很多说小程序不支持样式的@import，公布的第正式开发者工具就已经支持了。import "../../wxss/common.wxss";3、器&小程序支持的器在官方公布的文档中包括.class、#id、 element、element,element、::after(注意是双冒号)、::before这6种选择器。&经过测试，小程序对于:first-child、:last-child、.class-a .class-b{}，甚至层级的嵌套支持的。&不过官方并不级联的这种写法，考虑到后面切Native的可能，会没支持级联选择。&所以保险起见，不建议.class-a .class-b{}这种级联的写法，以免后期工具过滤导致页面错乱。组件小程序在0.10.102800的版本中了 textarea，并即将废弃操作的系列组件。&通过一个表格来对比下HTML5和小程序的组件标签的区别；一一来下：&1、view&和view都是盒模型，默认display:block。&盒模型在布局过程中，一般display:flex的写法，配合justify-content:align-items:的定义实现盒模型在横向和纵向的居中。2、text&text文本节点以外的其他节点都长按选中。。&截止到0.10.102800的开发者工具text支持嵌套text，不过有class的text会被面板过滤，样式不影响。&text class="text-tips"&& & &text class="text-light"&* &/text&友情提示!&/text&&&!--支持text嵌套text--&&text&& & &view&&/view&&/text&&&!--不支持text嵌套其他标签--&3、 icon&icon可以直接用微信组件默认的图标，默认是iconfont格式的，从WeUI沿袭过来的一种做法。&自定义的icon推荐svg sprite格式或者iconfont。&目前，市面上还很好的合并单个svg为svg sprite的工具，需要手动拼图。4、input&input 的类型，值：text, number, idcard, digit, time, date 。&input不需要设置line-height或padding来纵向居中，默认placeholder的文字是居中的。&小程序把checkbox和radio都单独做成了组件，默认的input只支持输入文本。&文件在小程序里需要调用chooseImage事件完成；&input type="file" class="upload-input" accept="image/*"&&!--HTML5的上传文件--&&view class=" upload-block" bindtap="chooseImage"&&/view&&view class="upload-block" wx:for="{{imageList}}" wx:for-item="image"&& &image src="http://www.wekui.com/upload_files/qrcode/242.jpg" class="pic" src="http://www.wekui.com/upload_files/qrcode/242.jpg" bindtap="previewImage"&&/image&&/view&&!--小程序的上传，可以调用app原生的拍照和上传接口--&小程序CSS里的 :focus 不生效，需要修改placehoder的样式，通过placeholder-class=”class”来定义。.login .input-group input::-webkit-input-placeholder {& & color: #c0c0c0;}.login .input-group input:focus::-webkit-input-placeholder {& & color:&}&!--HTML5通过focus修改placeholder默认和点击时候的样式--&&input type="text" &placeholder="邮箱" placeholder-style="color:#c0c0c0" /&&input password type="number" placeholder="" placeholder-class="placeholder" &/&&!--小程序里通过placeholder-style和placeholder-class修改样式，不过并修改点击时候input的边框颜色--&5、picker&picker默认支持普通、日期和时间三种选择器。&picker通过bindchange事件来调取range中自定义的数据数据，并展示到页面中，调用的是原生的select。&小程序废弃了select组件，考虑到的是组件的不适合，用picker代替了。&select class="select-block"&&& & &option value="0"&选择&/option&& & &option value="1"&&/option&& & &option value="2"&&/option&&/select&&!--HTML5的下拉框--&&picker bindchange="bindPickerChange" value="{{index}}" range="{{area}}"&& &&view class="picker"&& & & {{area[index]}}& & &/view&&/picker&Page({& data: {& & area: [, 美国, 巴西, 日本],& }})&!--js里的area数组--&&!--picker下拉框--&6、 navigator&navigator支持相对路径和路径的跳转，默认是打开新页面，当前页面打开需要加redirect；&navigator仅支持5级页跳转；&navigator不可跳转到小程序外的链接地址；&navigator class="navigator" redirect &url="../login/index" &页&/navigator&在小程序开发工具里，默认打开新页面，工具左上角有返回按钮。加上redirect，当前页打开，不出现返回按钮。7、image&小程序的image与HTML5的img的区别在于：小程序的image是按照background-image来实现的。&默认image的高宽是320*240。必须通过样式定义去默认高宽，auto在这里不生效。（开发者说设置的原因是：如果设置 auto ，页面布局会图片加载的过程有一个闪的现象（例如高度从 0 到 height ），所以要求一定要设置一个宽度和高度。）&的api支持图片的高宽。不过这里返回的高宽是px单位，不支持屏幕自适应；&图片包括三种缩放scaleToFill、aspectFit、aspectFill和9种裁剪模式，三种缩放模式的实现原理对应如下：scaleToFill{& & background-size:% %;//不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image }aspectFit{& & background-size://保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。}aspectFill{& & background-size://保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。}8、button&补充下button的实现方式，button的边框是用:after方式实现的，用户如果在button上定义边框会出现两条线，需用:after的方式去默认值。不过这个会在最近的开发者工具中。button::after {content:" ";width:%;height:%;border:1px solid rgba(0, 0, 0, 0.2);}小程序不支持button:active这种样式的写法，button的点击态通过.button-hover{}的样式覆盖，也可修改hover-class为自定义的样式名。9、css3动画&版的开发工具已经支持transition和keyframes动画，js苦的写动画队列了。官方公布的小程序的组件之外，有一些标签比如，span、em、strong、b也是支持的，只是官方并不推荐使用。浏览器内核在iOS上，微信的浏览器渲染内核是wkwebview；而在Android上，微信则采用了腾讯QQ浏览器年4月份发布的X5内核（blink内核）作为渲染引擎。在小程序的开发工具上，小程序的JavaScript是运行在chrome内核（nwjs）中。autoprefixer小程序会在接下来的版本中补全css前缀，使用的插件是postcss的autoprefixer，设置的兼容级别是& ios 8及& android 4.1。const browserOptions = {& browsers: [& last 3 versions,& ios &= 8,& android &= 4.1,& ]}也就是说，在写css的时候要写前缀的写法。比如：display:flex，工具自动编译为display:display:-webkit-flex。OM小程序上图为OM小程序的开发界面。我们从布局、裁图和loading动画几个方面简单说下OM小程序具体的UI开发。&1、flex布局图om的列表为例，文章的形态包括纯文字的和图文混合的。图文混合的文字是1行2行都需要相对于图片纵向居中。用flex的布局，就可以实现这3种状态不修改CSS文件，只按需隐藏DOM结构就搞定。.media {& display:& justify-content://设置或检索弹性盒子在主轴（横轴）方向上的对齐方式。& align-items://定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。}.media .content {& & flex: 1;}在做传统H5的时候，为了兼容低端设备的机型，通常不太敢轻易尝试flex，但在小程序里就可以大胆的使用了。2、裁图&正是由于小程序把图片处理成背景图片，OM的素材管理页面图片的实现方式在这里遇到了一个挑战。&简单列举下om各种不同尺寸图片在平台上的展示方案。1、高&50px：&（1）宽&175px，原图居中显示；&（2）宽&175px，定宽等比上下居中显示；&2、50px&高&400px：&（1）宽&175px，原图居中显示；&（2）宽&175px，定宽等比显示；&3、高&400px：&（1）宽&175px，原图居中显示、超出400px高度隐藏；&（2）宽&175px，定宽等比显示、超出400px高度隐藏；这种方案，用css和img实现，要设置外层盒子高宽，图片自适应缩放。.pic-list .pic-item .pic-body .pic {& & width: 100%;& & text-align:& & overflow:& & max-height: 4& & min-height: 0.5& & display: -webkit-& & -webkit-box-orient:& & -webkit-box-align:& & -webkit-box-pack:}.pic img {& & -webkit-box-flex: 1;}然而因为小程序里是用背景图片的方式，简单的css设置并实现智能裁图的方案。需要配合js计算出不同尺寸图片对应的适配尺寸。.pic-list .pic-item .pic-body .pic {& width: 100%;& text-align:& overflow:& max-height: 800& min-height: 100& display:& align-items:& justify-content:}这里需要后台接口数据列表的图片高宽，js对拿到图片的不同尺寸进行算法计算，重新赋值再返回给数据。3、css3动画改变默认loading&小程序默认提供的loading是普通的菊花loading，这里OM使用自定义的keyframes序列帧动画。.icon-loading {& & animation: loadingWhite 1.2& & animation-timing-function: steps(10);}@keyframes loadingWhite {&& & 0% {&& & & & background-position:0 0;&& & }&& & 100%{&& & & & background-position:-rpx 0;&& & }&}&写在最后微信小程序集成了很多原生的组件，从和页面流畅度来说，都会比HTML5要很多。微信小程序相对于HTML5开发来说，除了熟悉API需要成本之外，开发难度指数3颗星，还是很容易上手的。开发者工具、组件和API目前刚刚对外公测，还不算太成熟，里面很多坑需要开发者去填。文章篇幅有限，在这里只能简单从UI开发角度下小程序的开发。有关小程序的API，可以查阅小程序开发文档&。&由于开发工具一直在持续更新，文章中可能会有不准确或者更新不及时的地方，还请谅解。&最后感谢微信小程序开发者gideonlin、jfengjiang、linkqjlin等同学的不吝赐教。本文首发在企鹅媒体平台（简称OM）
分享到朋友圈
第一分享家
分享家规则
1、第一分享家好处是什么？
1)文章会挂上你的二维码提高爆光率
2)分享出去的文章你就是作者
3)将会获得网站金币
4)首页推荐快速加粉丝
5)像公众号一样传播你的文章
2、如何成功激活分享家？
任何微信搜索用户都可以成为分享家，您只要把任何一篇文章成功分享到微信朋友圈（必须是微信朋友圈，分享到其他平台是激活不了的哦），系统就会立即自动激活您成为分享家。
3、如何成为第一分享家？
第一分享家是分享家族中最高荣誉，在分享家族中分享同一篇文章贡献值最高的用户就是该文章的第一分享家。
4、怎样统计我的贡献值？
贡献值是来自您分享文章到微信朋友圈好友的访问量，访问IP次数越多，贡献值就越高。同样您朋友在微信朋友圈转发您分享的文章，其贡献值也是属于您的。朋友帮您转发的越多，您的贡献值就会更高。
扫描二维码
进微信群手机站
更多帮助信息
Copyright ?
All Rights Reserved