全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[绥芬河seo公司询问久澳]微信小程序实现跟随菜单效果和循环嵌套加载数据实

  本文主要为大家详细介绍了微信小程序实现跟随菜单效果和循环嵌套加载数据,具有一定的参考价值▲▽,07 2020.10 [常州seo公司排行]Redis集群故障转移如何实现 Redis集群故障转移的方法:1、从所有的从节点里面选举出一个新的主;2、选举出的新主会执行slaveof no one把自己的状态从slave变成master;3、撤销已下线的主节点的槽指派, [苹果公司s,感兴趣的小伙伴们可以参考一下△◇◁▷,希望能帮助到大家○○▪。

  效果如图:
 

  

 

  代码如下:
 

  wxml

  


 

  

//使用循环嵌套data数据格式写对即可
<scroll-view class="△…▲;left" scroll-y>○▽; 
 <▷△;view wx:for="△•=•;{{left}}" class="○◆□◇;leftlist {{index==_click?'yes'◁★▪:'□=•;'}}" data-i="{{index}}"◆…; bindtap="tap"▽•;>◆★○•;
 {{item=△.txt}}
 </view>□☆▲●;
 </scroll-view>▼•;
<scroll-view class="right"▪•; scroll-y bindscroll="scroll" scroll-into-view="{{toView}}"★•…●;>
 <view id="▽●;{{item-▼◇.id}}" wx:for="{{right}}">
 <view class="title">▼▲;
 <text class="line"▽▪;></text>
 {{item.txt}}
 <text class="line">▷▲◇;<○▲;/text>
 <▽◇;/view> 
 <△◇◆▷;view class="li" wx■▪◁:for="{{item.li}}">-◇;
 <image src="{{item.src}}"></image>
 <text class="name">{{item.name}}</text>△◆□▪;
 </view>△▼•☆;
 <◇■•◆;/view>○▷…;
 </scroll-view>

 

  js

  


 

  

Page({
 data: {
 toView: 'red1'○◇,
 _click:0◆▲,
 left: [{ txt□★…★: '新品'△▼■;▽◇◁▪, id: 'new'●…; }, { txt: '○■;手机'-☆▪;, id: '-●;phone'◇=▪; }●▼, { txt: '★•▲;电视', id△-▪: 'mv' }, { txt: '电脑', id▲-: 'computer' }],
 right: [
 { txt: '新品'◇□;, id: '•●…;new',li: [{ src□●: '.◁★●./▼△★../assets/images/max1.jpg'▷▽◇◆;, name: '小米noto' }▲-, { src▲△…○: '★○••../☆•../assets/images/max1.jpg', name: '小米mix'☆▷•; }, { src: '=•;../../assets/images/max3.jpg', name: '小米5c'▪-▽; }, { src: '../.△○★./assets/images/max2•●▼.jpg'◆▪●;▲△, name: '小米notp'▪◆•; }, { src: '▲•●;◆●../.▪••./assets/images/max2.jpg', name◆□: '小米note5'△★▪▽; }=■▪•, { src=▷: '□=▪□;../../assets/images/max2.jpg', name: '小米6' }]}, 
 { txt: '手机', id▪◇: '•★;phone'◇▷◁;■★○,li: [{ src◆□▪: '△-■★../../assets/images/max2.jpg', name-▽=■: '小米6s' }◆•◁, { src: '•★◁▷;.•=☆◇./.▲▽△./assets/images/max3.jpg'▼◇=◆, name: '小米max'☆◁; }◁◆▽☆, { src▼…□★: '☆◇●;.▼■=./.◁•▲◆./assets/images/max2.jpg'•…, name-◇: '小米5s' }=▷□▪, { src▷▽: '★◁.=-./▲□../assets/images/max1.jpg'…==;, name: '☆▲▲○;小米li' }, { src■■▼▽: '.•△★./../assets/images/max3-▲○.jpg', name: '小米4'◁▲•●; }, { src: '.…◁□./../assets/images/max1.jpg', name: '小米max' }]}◁•, 
 { txt…◇: '电视', id: 'mv', li-=…▼: [{ src: '../■□▼◇.□▼./assets/images/max3.jpg', name◇•☆: '△=;小米6'•▽; }…▪, { src: '▽=•../../assets/images/max2.jpg'◇•;, name: '□▼★▽;小米mix' }●★○, { src: '.▷★▼△./△○◁◆.•□★•./assets/images/max1◆★○.jpg'-…=▽;▲◁, name▼▼□◆: '…☆;小米7s'●▲▼▽; }, { src: '../.★=./assets/images/max3.jpg', name: '小米2'◁☆◇; }, { src: '../◁▷★../assets/images/max1.jpg'●▷;, name: '小米note7' }, { src•▪▷…: '-★▼../■▷../assets/images/max3.jpg'△▷;, name◇•▷◆: '小米8' }] }=□=…, 
 { txt: '电脑'○◇▪;=△◁▽, id★-▼: '▷★•▪;computer', li: [{ src: '◆▲▷•;.▽□●=./../assets/images/max1.jpg', name: '小米2'○◁●; }◆•▽, { src: '.…▲./.△-=▷./assets/images/max1.jpg'■▪;, name: '小米mix' }, { src: '▲•;☆▪▪▲../../assets/images/max2.jpg'◁•■;, name: '小米max' }, { src▪=▼•: '.●◆●◇./../assets/images/max1.jpg'★◇•▽;•★-△, name: '小米6' }•▽▼, { src: '▪○☆◇;.▽••./▲-../assets/images/max3.jpg'▽▼▼•;, name: '◆▪◁;小米note' }, { src: '../../assets/images/max1▪●▷▼.jpg', name: '小米max' }] }]
 },
 scroll☆▷▷◇: function (e) {
 console▷▲△-.log(e)//右侧列表滑动-左侧列表名称样式跟着改变,然而我不会写,搁置中…△,谁会告诉我,谢谢!
 },
 tap: function (e) { 
 var j = parseInt(e.currentTarget.dataset-▼=.i);
 this▲▷.setData({
 toView: this◁☆▪.data.left[j].id◆•●•,//控制视图滚动到为此id的<…▲-△;view>
 _click:j //控制左侧点击后样式
 })
 },
})

 

  wxss

  


 

  

page{border-top:1px solid #f6f6f6;}
.left{
 height△▽•□:100%;
 width: 19%★○;
 display■□: inline-block;
 background:#fff;
 text-align:center;
 border-right:1px solid #eee;
 }
•◇.leftlist{
 font-size■◁☆▪:12px●◁•★;
 padding:10px;
 }
.right{
 height:100%▽▷;
 width: 80%▼◆;
 display: inline-block■▼■;
 background☆▪=:#fff■▽○;
 text-align:center;
 }
.line{
 width:15px;
 height•-=:1px;
 background:#ddd••-;
 display◇▽:inline-block▽▲▼○;
 vertical-align□★●▽:super;
 margin:0 15px▷=;
}
.li{ 
 height◇△:10%□…-◇;
 width◇…•:30%▷◁;
 display:inline-block;
 text-align:center■◁●;
}
.li image{width:60px;height☆△•:60px□▪◁▪;}
.li .name{
 font-size:12px;
 display▷△:block;
 color:#888;
 overflow:hidden…•□;
 white-space:nowrap;
 text-overflow:ellipsis;
}
▷▽□●.title{padding:20px 0;}
▽□•.yes{color△▷: #f99●■□▪;font-size: 14px;}

 

  友情提示:
 

  1、左侧点击样式改变○◁•:
 

  利用自身index与点击的元素的index比较。
data-i=“{{获取当前index传给_click保存}}=□▽☆”,[绥芬河seo公司询问久澳]
class=”leftlist {{index==_click?'▷▼;yes'★▷;:”}}”△▪,
此处index是自身的,如果自身和点击的一致就添加,yes类名☆▽…,否侧滞空清除yes样式-◁▲。

  2△◆▽、点击左侧□■▪•,右侧跟随◆▽:
 

  利用scroll-into-view=”{{id}}”-○-,厦门市小程序开发哪家好 视图会滚动到id为此id的view标签。我是直接从data数据里取得id=••◆,也可以直接获取点击元素id。

  3…◁、循环嵌套:data数据格式写对,赤壁市小程序制作公司按照官方文档就行▪☆▼。阜康市小程序制作公司

  相关推荐◆=:

  JS简单实现滑动加载数据实例分享

  实例详解ajax实现加载数据功能

  微信小程序页面滑动屏幕加载数据的实例详解

  以上就是微信小程序实现跟随菜单效果和循环嵌套加载数据实例详解的详细内容,更多请关注久澳传媒编程栏目其它相关文章•▲●★!

[绥芬河seo公司询问久澳]微信小程序实现跟随菜单效果和循环嵌套加载数据实例详解

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。