Daisy_Jy小程序功能

下拉菜单

<view class="baseview">
  <block a:for="{{cdd}}" a:for-item="base" > 
    <view class="fmenu" onTap="showmenu" data-index="{{index}}">
      <view class="leftview">
        {{index+1}}
      </view>
      <view>
        {{base.c1}}
      </view>
    </view>
    <block a:for="{{base.c2}}">
      <view class="fmenu1" hidden="{{base.ch}}" data-cnamex="{{item.c3}}" onTap="gotoview">
        {{item.c3}}
      </view>
    </block>
  </block>
</view>

Page({
  data: {
    cdd:[{"c1":"主1","ch":true,"c2":[{"c3":"鸭血粉丝汤"},{"c3":"红烧狮子头"},{"c3":"阳春面"}]},
    {"c1":"主2","ch":true,"c2":[{"c3":"红烧肉"},{"c3":"土豆丝"},{"c3":"醋溜白菜"}]},
    {"c1":"主3","ch":true,"c2":[{"c3":"小笼包"},{"c3":"鱼香肉丝"},{"c3":"酸菜鱼"}]},]

  },
  showmenu(e){
    let currentindex=e.currentTarget.dataset.index;
    console.log(currentindex);
    for(let i=0;i<this.data.cdd.length;i++)
    {
      if(i==currentindex)
      {
        continue;
      }
      else{
        this.data.cdd[i].ch=true;
      }
      
    }
    let flag=this.data.cdd[currentindex].ch;
    console.log(!flag);
    this.data.cdd[currentindex].ch=!flag;
    console.log(this.data.cdd[currentindex].ch);
    let mdatas=this.data.cdd;
    this.setData({cdd:mdatas});
    
  },
  gotoview(e){
    console.log(e);
    let name=e.currentTarget.dataset.cnamex;
   
    console.log(name);
    my.navigateTo({
      url: '../caipu/caipu?name='+name,
      
    });
  },
  onLoad() {},
});

.baseview{
  width: 100%;
  height: 100vh;
  background-color: rgb(191, 233, 233)
}
.fmenu{
  width: 100%;
  height: 7%;
  /* border: 1px solid pink ; */
  display: flex;
  align-items: center;
  background-color: rgb(197, 255, 212);
  border-radius: 10rpx;
  margin-bottom:2px; 
  /* justify-content: center; */
}
.leftview{
  width: 10%;
  height: 90%;
  /* border: 1px solid red; */
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border-radius: 50%;
  background-color: rgb(205, 200, 247);
  
}
.fmenu1{
  width: 100%;
  height: 6%;
  /* border: 1px solid rgb(45, 124, 228); */
  background-color: rgb(88, 124, 228);
  border-radius: 3px;
  margin: 3px 2rpx 3px 2rpx;
}

使用view的hidden属性实现下拉菜单的功能

点击更多

https://thzmthzm0727.baklib.com/8783/9cc8

使用slice(start,end)对数组进行切片

用js实现表面增删改查

<!-- pages/one/one.ttml -->
<view class="baseview">
  <view class="topview">
    <view class="top1">
      <view class="stop1" bindtap="addup">向上添加</view>
      <view class="xtop1" bindtap="adddown">向下添加</view>
    </view>
    <view class="top2">英雄图鉴</view>
    <view class="top3">
      <view class="cleartop3" bindtap="cleartop3">清空</view>
    </view>
  </view >
 <scroll-view scroll-y="true" class="scrollview">
    <block tt:for="{{wzmenu}}">
      <view class="ct0">
        <view class="ct1"><image src="{{item.img}}"  class="cimg"/></view>
        <view class="ct2">{{item.text}}</view>
        <view class="ct3">
          <view class="delview" bindtap="delct3" data-index="{{index}}">删除此条</view>
          <view class="upview" bindtap="changect3" data-index="{{index}}">更换此条</view>
        </view>
      </view>
    </block>
  </scroll-view>


</view>

// pages/one/one.js
Page({
  data: {
    wzmenu:[{"img":"../images/w1.jpg","text":"凯"},
    {"img":"../images/w2.jpg","text":"李白"},
    {"img":"../images/w3.jpg","text":"西施"},
    {"img":"../images/w4.jpg","text":"刘备"},
    {"img":"../images/w5.jpg","text":"孙尚香"}],

    upmenu:[{"img":"../images/w6.jpg","text":"嫦娥"},
    {"img":"../images/w7.jpg","text":"韩信"},
    {"img":"../images/w8.jpg","text":"公孙离"},
    {"img":"../images/w9.jpg","text":"蔡文姬"},
    {"img":"../images/w10.jpg","text":"小阿离"}],

  },
  addup(){
    let curNum=parseInt(Math.random()*this.data.upmenu.length);
    console.log(curNum);
    let updata=this.data.upmenu[curNum];
    let wzdata=[updata].concat(this.data.wzmenu);
    this.setData({wzmenu:wzdata});
  },
    adddown(){
    let curNum=parseInt(Math.random()*this.data.upmenu.length);
    console.log(curNum);
    let updata=this.data.upmenu[curNum];
    let wzdata=this.data.wzmenu.concat([updata]);
    this.setData({wzmenu:wzdata});
  },
  cleartop3(){
    this.setData({wzmenu:[]});
  },
  delct3(e){
    let index=e.currentTarget.dataset.index;
    console.log(index);
    this.data.wzmenu.splice(index,1);
    this.setData({wzmenu:this.data.wzmenu});
  },
  changect3(e){
    let index=e.currentTarget.dataset.index;
    let curNum=parseInt(Math.random()*this.data.upmenu.length);
    console.log(curNum);
    let updata=this.data.upmenu[curNum];
    this.data.wzmenu[index]=updata;
    this.setData({wzmenu:this.data.wzmenu});

  },
  onLoad: function (options) {

  }
})

/* pages/one/one.ttss */
.baseview{
  width: 100%;
  height: 100vh;
  /* background-color: #757575; */
}
.topview{
  width: 100%;
  height: 11%;
  background-color: pink;
  display: flex;
}
.top1{
  width: 20%;
  height: 100%;
  /* background-color: aqua; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.top2{
  width: 60%;
  height: 100%;
  /* line-height: 60%; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #b0b0b0;
  /* background-color: seagreen; */
}
.top3{
  width: 20%;
  height: 100%;
  /* background-color: greenyellow; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cleartop3{
  width: 60%;
  height: 40%;
  background-color: #747474;
   border-radius: 5rpx;
}
.stop1{
  width: 60%;
  height: 30%;
  background-color: #747474;
   border-radius: 5rpx;
   font-size: 9px;
}
.xtop1{
   width: 60%;
  height: 30%;
  margin-top: 10px;
  background-color: #747474;
  border-radius: 5rpx;
   font-size: 9px;
}
.scrollview{
  width: 100%;
  height: 89%;
  /* background-color: skyblue; */
}


.ct0{
  width: 100%;
  height: 10%;
  background-color: #757575;
  margin-bottom: 2px;
  margin-top: 3px;
  display: flex;
}
.ct1{
  width: 17%;;
  height: 100%;
  /* border-right: 2px solid pink; */
}
.ct2{
  width: 50%;;
  height: 100%;
  /* border-right: 2px solid pink; */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0b0b0;
}
.ct3{
  width: 33%;;
  height: 100%;
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
  /* padding: 10px 10px 10px 0; */
  /* border: 2px solid black; */
}
.cimg{
  width: 100%;
  height: 100%;
   border-radius: 5rpx;
}
.delview{
  width: 35%;
  height: 43%;
  background-color: pink;
   border-radius: 5rpx;
   font-size: 9px;
   font-weight: 800;
}
.upview{
  width: 35%;
  height: 43%;
  /* margin-top: 5px; */
  margin-left: 12px;
  background-color: pink;
   border-radius: 5rpx;
   font-size: 9px;
   font-weight: 800;
  /* padding:  0 20px; */
}

使用concat连接数组

Math.random()采集随机数

左右菜单对应

<!-- pages/categroy/categroy.ttml -->
<!--pages/category/category.wxml-->
<!--左边菜单  start  -->
<view  class="leftview">
<!--<scroll-view class="mview">-->
   <block  wx:for="{{menudatas}}">
       <view   class="{{index==curnum?'activeview':'itemview'}}"  bindtap="clickitem" data-index="{{index}}">
          {{item}}
       </view>  
   </block>
  <!--</scroll-view> -->
</view>
<!--左边菜单  end  -->

 
<!--右边菜单  start  -->
<view class="contentview">
   <scroll-view scroll-y="true" class="sview" scroll-into-view="curview{{curnum}}"  scroll-with-animation="true" >
      <block tt:for="{{menudatas}}">
         <view  class="cellview" bindtouchstart="scrollitem"  data-index="{{index}}" id="curview{{index}}">
              <view class="header" >
              {{item}}
             </view>
             <view  class="tuitem">
             第{{index+1}}项，视图名称为:{{item}}
              </view>
        </view>
      </block>
   </scroll-view>
</view>

<!--右边菜单  end  -->

// pages/categroy/categroy.js
// pages/category/category.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

    //数据
    menudatas:["果味","蔬菜","炒货","点心","火锅","海鲜","和牛","探鱼","百果园","烧烤"],
    curnum:0

  },
  clickitem(e)
  {
     let curIndex= e.currentTarget.dataset.index;
    console.log(curIndex);

    this.setData({curnum: curIndex});
     
  },
  scrollitem(e)
  { 
    console.log("视图在滚动");

    console.log(e);

    let curIndex = e.currentTarget.dataset.index;
    console.log(curIndex);

    this.setData({ curnum: curIndex });

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

/* pages/categroy/categroy.ttss */
/* pages/category/category.wxss */
.leftview{
  height: 100%;
  width: 200rpx;
  border-right: 1rpx  solid  gray;
  border-top: 4rpx  solid  black;
  position: fixed;
  top:0;
  left: 0;
}
.itemview{
  width: 100%;
  height: 10%;
  border-bottom: 4rpx  solid  black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-family: "楷体";

}
.activeview{
    width: 100%;
  height: 10%;
  background-color: paleturquoise;
   display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-family: "楷体";
  color: peru;
}
.mview{
  width: 100%;
  height: 100%;
}
.contentview{
  margin-left: 30rpx;
  margin-right: 30rpx;
  width: 65%;
  height: 100%;
  position: fixed;
  right: 0;
  bottom: 0;
  background-color: palegreen;
}
.sview{
    width: 100%;
    height: 100%;
}
.cellview{
  width: 100%;
  height: 100%;
  border-bottom: 20rpx  solid  white;
  margin-top: 30rpx;

}

对scroll-into-view=""与内部view的id属性的应用