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


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 相关文章推荐
jquery 操作DOM案例代码分享
Apr 05 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
js实现分页功能
2017/05/24 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang