网站想换一个空间怎么办,网站开发跟app开发的差别,做网站 node php,wordpress登录后页面该组件一般用于同时展示多个商品、分类的场景#xff0c;也可以完成左右滑动的列表。 #平台差异说明 App#xff08;vue#xff09;App#xff08;nvue#xff09;H5小程序√√√√ #基本使用 通过slot传入内容 templateu-scroll-listview v-for…该组件一般用于同时展示多个商品、分类的场景也可以完成左右滑动的列表。 #平台差异说明 AppvueAppnvueH5小程序√√√√ #基本使用 通过slot传入内容 templateu-scroll-listview v-for(item, index) in list :keyindeximage :srcitem.thumb/image/view/u-scroll-list /templatescriptexport default {data() {return {list: [{thumb: https://cdn.uviewui.com/uview/goods/1.jpg}, {thumb: https://cdn.uviewui.com/uview/goods/2.jpg}, {thumb: https://cdn.uviewui.com/uview/goods/3.jpg}, {thumb: https://cdn.uviewui.com/uview/goods/4.jpg}, {thumb: https://cdn.uviewui.com/uview/goods/5.jpg}]}}} /scriptcopy #指示器的使用 indicator 用于控制指示器是否显示indicatorWidth 用于控制指示器整体的宽度indicatorBarWidth 用于控制指示器滑块的宽度indicatorColor 指示器的颜色indicatorActiveColor 滑块的颜色indicatorStyle 指示器的位置/样式控制 templateu-scroll-list :indicatorindicator indicatorColor#fff0f0 indicatorActiveColor#f56c6cview v-for(item, index) in list :keyindeximage :srcitem.thumb/image/view/u-scroll-list /templatescriptexport default {data() {return {indicator: true,list: [{thumb: https://cdn.uviewui.com/uview/goods/1.jpg}, {thumb: https://cdn.uviewui.com/uview/goods/2.jpg}, {thumb: https://cdn.uviewui.com/uview/goods/3.jpg}, {thumb: https://cdn.uviewui.com/uview/goods/4.jpg}, {thumb: https://cdn.uviewui.com/uview/goods/5.jpg}]}}} /scriptcopy #兼容性与性能 此组件是在nvue中引入bindingx此库类似于微信小程序wxs目的是让js运行在视图层减少视图层和逻辑层的通信折损在nvue中会有更好的体验。此组件是在APP-VUE、H5、小程序中使用的是wxs。其他平台则使用js完成。 当滑动到最左边/最右边时uView提供了事件left和right可供调用用于对列表滑动到端点处的业务实现。 templateu-scroll-list rightright leftleftview classscroll-list styleflex-direction: row;viewclassscroll-list__goods-itemv-for(item, index) in list:keyindex:class[(index 9) scroll-list__goods-item--no-margin-right]image classscroll-list__goods-item__image :srcitem.thumb/imagetext classscroll-list__goods-item__text{{ item.price }}/text/viewview classscroll-list__show-moretext classscroll-list__show-more__text查看更多/textu-icon namearrow-leftward color#f56c6c size12/u-icon/view/view/u-scroll-list /template script export default {data() {return {list: [{price: 230.5,thumb: https://cdn.uviewui.com/uview/goods/1.jpg}, {price: 74.1,thumb: https://cdn.uviewui.com/uview/goods/2.jpg}, {price: 8457,thumb: https://cdn.uviewui.com/uview/goods/6.jpg}, {price: 1442,thumb: https://cdn.uviewui.com/uview/goods/5.jpg}, {price: 541,thumb: https://cdn.uviewui.com/uview/goods/2.jpg}, {price: 234,thumb: https://cdn.uviewui.com/uview/goods/3.jpg}, {price: 562,thumb: https://cdn.uviewui.com/uview/goods/4.jpg}, {price: 251.5,thumb: https://cdn.uviewui.com/uview/goods/1.jpg}]}},methods: {left() {console.log(left);},right() {console.log(right);}} } /scriptstyle langscss .scroll-list {include flex(column);__goods-item {margin-right: 20px;__image {width: 60px;height: 60px;border-radius: 4px;}__text {color: #f56c6c;text-align: center;font-size: 12px;margin-top: 5px;}}__show-more {background-color: #fff0f0;border-radius: 3px;padding: 3px 6px;include flex(column);align-items: center;__text {font-size: 12px;width: 12px;color: #f56c6c;line-height: 16px;}} } /style