微信小程序实现跟随菜单效果和循环嵌套加载数据


Posted in Javascript onNovember 21, 2017

本文实例为大家分享了微信小程序实现跟随菜单效果、微信小程序循环嵌套加载数据,供大家参考,具体内容如下

效果如图:

微信小程序实现跟随菜单效果和循环嵌套加载数据

代码如下:

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保存}}”,
class=”leftlist {{index==_click?'yes':”}}”,
此处index是自身的,如果自身和点击的一致就添加,yes类名,否侧滞空清除yes样式。

2、点击左侧,右侧跟随:

利用scroll-into-view=”{{id}}”, 视图会滚动到id为此id的view标签。我是直接从data数据里取得id,也可以直接获取点击元素id。

3、循环嵌套:data数据格式写对,按照官方文档就行。

Javascript 相关文章推荐
javascript 写类方式之三
Jul 05 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
js分页代码分享
Apr 28 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
JavaScript实现简单拖拽效果
Sep 15 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 #Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 #Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 #Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 #Javascript
微信小程序实现tab切换效果
Nov 21 #Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 #jQuery
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 #Javascript
You might like
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
js 学习笔记(三)
2009/12/29 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
Angular实现表单验证功能
2017/11/13 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
一些Solaris面试题
2013/03/22 面试题
农业大学毕业生的个人自我评价
2013/10/11 职场文书
出纳岗位职责
2013/11/09 职场文书
认购协议书范本
2014/04/22 职场文书
期末学生评语大全
2014/04/24 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android