E企盈营销工具技术服务商 热线:4006-838-530

小程序开发视图容器movableview和movablearea

E企盈直播平台营销卖货系统

一、需求:实现可以滑动的窗口二、代码.wxml!– 秒杀 —  view class=’u-wrp-secKill’    view class=’u-wrp-secKillHead’      text class=”u-txt-skTitle”京东秒杀/text      text class=”u-txt-sktime”18点场/text    /view    movable-area style=’width:auto’      movable-view animation scroll-x style=’height:220rpx;width:1280rpx’ direction=’horizontal’ inertia=’true’ out-of-bounds      block wx:for='{{skItems}}’        view class=’u-img-skimgs’          image src='{{item.pic}}’ class=’u-img-skimgItem’/image          text class=’u-txt-sktxtItem1′{{item.pNew}}/text          text class=’u-txt-sktxtItem2′{{item.pOld}}/text        /view      /block      /movable-view    /movable-area  /view  !– /秒杀 –.wxss.u-wrp-secKill {  display: block;  position: relative;  margin-top: 10rpx;  width: 100vw;  height: 280rpx;  background: #fff;}.u-wrp-secKillHead {  display: block;  position: relative;  width: inherit;  height: 60rpx;  border-bottom: 1px solid #f0f0f0;}.u-txt-skTitle {  line-height: 60rpx;  font-size: 28rpx;  color: #f00;  padding: 0 20rpx;  display: inline-block;  position: relative;  font-weight: bold;}.u-txt-sktime {  line-height: 60rpx;  font-size: 24rpx;  color: #333;  padding: 0 20rpx;  display: inline-block;  position: relative;  font-weight: bold;}.u-img-skimgs {  width: 160rpx;  height: 220rpx;  display: inline-block;  background-color: #fff;  float: left;  text-align: center;}.u-img-skimgItem {  width:140rpx;height:140rpx;}.u-txt-sktxtItem1 {  display:block;color:#f00;font-size:24rpx;}.u-txt-sktxtItem2 {  display:block;color:#999;font-size:24rpx;text-decoration:line-through;}.jsPage({  data: {    “skItems”: [{      “pic”: “img/seckill/01.jpg”,      “pOld”: “999”,      “pNew”: “666”    }, {      “pic”: “img/seckill/02.jpg”,      “pOld”: “999”,      “pNew”: “666”    }, {      “pic”: “img/seckill/03.jpg”,      “pOld”: “999”,      “pNew”: “666”    }, {      “pic”: “img/seckill/04.jpg”,      “pOld”: “999”,      “pNew”: “666”    }, {      “pic”: “img/seckill/05.jpg”,      “pOld”: “999”,      “pNew”: “666”    }, {      “pic”: “img/seckill/06.jpg”,      “pOld”: “999”,      “pNew”: “666”    }, {      “pic”: “img/seckill/07.jpg”,      “pOld”: “999”,      “pNew”: “666”    }, {      “pic”: “img/seckill/08.jpg”,      “pOld”: “999”,      “pNew”: “666”    }]  }})三、知识点总结若没有movable-area,则movable-view就是一个普通的视图容器,不会滑动,并且其在整个容器flex中的布局也会失效。效果如图:movable-area style=’width:auto’若不设置width,height则会根据movable-view的大小调整movable-view的属性要直接在 movable-view animation scroll-x style=’height:220rpx;width:1280rpx’ direction=’horizontal’ inertia=’true’ out-of-bounds中设置,其中类型为布尔值的属性,可以不写布尔值只写属性名,例如movable-view inertia=’true’即为movable-view inertia参考博文:https://www.jianshu.com/p/0e75633a68ca

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序开发视图容器movableview和movablearea
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏