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


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图片平滑连续滚动插件
Apr 27 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
js读取cookie方法总结
Oct 31 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
基于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
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
python3 logging日志封装实例
2020/04/08 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
中专生自我鉴定范文
2013/12/19 职场文书
奉献演讲稿范文
2014/05/21 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
教师节活动总结
2014/08/29 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang