怎么把服务器做网站,来年做哪个网站能致富,云购物商城,建设银行的登录网站首先我们来分析下UI小妹发来的产品原型图#xff1a;
微信小程序商品分类页需要实现
1.单击左边的商品类目#xff0c;右侧实现联动跳转到对应商品类目标题#xff1b;
2.触屏拖动右侧商品列表#xff0c;右侧跳转到对应商品类目#xff1b; 2.分析需求我们可以把屏幕分…首先我们来分析下UI小妹发来的产品原型图
微信小程序商品分类页需要实现
1.单击左边的商品类目右侧实现联动跳转到对应商品类目标题
2.触屏拖动右侧商品列表右侧跳转到对应商品类目 2.分析需求我们可以把屏幕分为以下部分主要使用到view scroll-view代码结构和分解图如下
view!--搜索框--view/view!--商品类别.商品列表--view!--left--scroll-view/scroll-view!--right--scroll-view/scroll-view/view
/view 3.搜索view比较简单在这里就不在阐述主要实现商品类别和商品列表的交互。
scroll-view使用到的属性
scroll-y允许纵向滚动需要设置高度。
scroll-with-animation在设置滚动条位置时使用动画过渡。
scroll-top设置竖向滚动条位置商品列表上下滑动时动态变更位置。
scroll-into-view值应为某子元素idid不能以数字开头。设置哪个方向可滚动则在哪个方向滚动到该元素。 代码实现最后结果如下
1.test.wxml
//*******************************************************
//* 微信版蚂蚁森林上线了微信搜蚂蚁森林立即体验 *
//*******************************************************view classcontainerview styleheight: 100rpx;/viewview classVerticalBox!--left--scroll-view classVerticalNav nav scroll-y scroll-with-animation scroll-top{{navTop}} styleheight:calc(100vh - 100rpx)view classcu-item {{indexTabCur?text-green cur:}} wx:for{{dRes}} wx:keythis bindtaptabSelect data-id{{index}}{{item._name}}/view/scroll-view!--right--scroll-view classVerticalMain scroll-y scroll-with-animation styleheight:calc(100vh - 100rpx) scroll-into-viewmain-{{titleCur}} bindscrollVerticalMainview classpadding-lr wx:for{{dRes}} wx:keythis idmain-{{index}}!--标题--view classcu-barview classaction iconfont icon-icon_collect {{item._name}/view/view!--列--block wx:if{{item.res.length0}}template ishotSelling wx:for{{item.res}} wx:keythis data{{item}}/template/blockblock wx:elseview styleheight: 300rpx;line-height: 300rpx;text-align: center;color:gray;本类目无/view/block/view/scroll-view/view
/view
2.test.wxss
.VerticalBox {display: flex;width: 100vw;}.VerticalNav.nav {width: 200rpx;white-space: initial;}.VerticalNav.nav .cu-item {width: 100%;text-align: center;background-color: #fff;margin: 0;border: none;height: 50px;line-height: 50px;position: relative;}.VerticalNav.nav .cu-item.cur {background-color: #f1f1f1;}.text-green {color: #39b54a;font-weight: bold;}.VerticalNav.nav .cu-item.cur::after {content: ; width: 18rpx;height: 40rpx;border-radius: 10rpx 0 0 10rpx;position: absolute;background-color: currentColor;top: 0;right: 0rpx;bottom: 0;margin: auto;}.VerticalMain {background-color: #f1f1f1;}.padding-top {padding-top: 30rpx;}.padding-lr {padding-left: 20rpx;padding-right: 20rpx;}.cu-bar {display: flex;position: relative;align-items: center;min-height: 100rpx;justify-content: space-between;position: relative;background-color: white;color: #666666;margin-bottom: 2rpx;background-image: linear-gradient(rgb(0, 180, 230), rgb(250, 250, 250));}.cu-bar .action {display: flex;align-items: center;height: 100%;justify-content: center;max-width: 100%;}
3.test.js
//*******************************************************
//* 微信版蚂蚁森林上线了微信搜蚂蚁森林立即体验 *
//*******************************************************// 微信版蚂蚁森林https://developers.weixin.qq.com/community/personal/oCJUswzZJO5lZcMDd3mKoDAClVdo
const app getApp()
Page({data: {TabCur: 0, //当前点击TabtitleCur: 0,//标题指引navTop: 0,load: true,dRes: [],},tabSelect(e) {let i Number(e.currentTarget.dataset.id)this.setData({TabCur: i,titleCur: i,navTop: (i - 1) * 50})},VerticalMain(e) {let self this;let dRes this.data.dRes;let tabHeight 0;if (this.data.load) {for (let i 0; i dRes.length; i) {let view wx.createSelectorQuery().select(#main- i);view.fields({size: true}, data {dRes[i].top tabHeight;tabHeight tabHeight data.height;dRes[i].bottom tabHeight;}).exec()}self.setData({load: false,dRes: dRes})}let scrollTop e.detail.scrollTop 20;for (let i 0; i dRes.length; i) {if (scrollTop dRes[i].top scrollTop dRes[i].bottom) {that.setData({navTop: (i - 1) * 50,TabCur: i})return false}}}
})
