微信小程序-开发第二周

本是古典何须时尚 2022-02-28 05:44 289阅读 0赞

# 微信小程序—尝试开发第二周 #

## 上周实现了一些基本的图片处理,这周继续页面进行改进。同时，和老师讨论之后，决定新增加社交功能以及自己搭配配方等功能。 ##

*  **微信小程序轮播图的实现**  
    如果对之前js的轮播图掌握较好的话，那么对照小程序官方文档应该是容易掌握的。下面直接贴代码了。  
    index. js:

data: {
        indicatorDots: false,
        autoplay: false,    //是否自动切换
        interval: 3000,   //自动切换时间间隔
        duration: 800,  //滑动动画时常
      },

index. wxml

然后在.wxss文件里设置需要的高度和宽度即可。

*  json文件中 一些小细节  
    开发过程中"navigationBarTextStyle": 后面填写颜色的十六进制码会报错 ，提示应该为“black”或“white”。 查阅文档发现，仅支持白和黑，我又一次弱智了?。
 *  分类界面设计

js文件

Page({
        data: {
            category: [
                {name:'面包',id:'guowei'},
                {name:'饼干',id:'shucai'},
                {name:'蛋糕',id:'chaohuo'},
                {name:'冰淇淋',id:'dianxin'},
                {name:'饮料',id:'cucha'},
                {name:'原料管理',id:'danfan'}, //各类的名字以及id ，id方便后面使用。
            ],
            detail:[],
            curIndex: 0,
            isScroll: true,
            toView: 'guowei'  //第一个界面的类目
        },
        onReady(){
            
                    this.setData({
                      detail: mockData.catelists
                    })
             
            
        },
        switchTab(e){
          const self = this;
          this.setData({
            isScroll: true   //局部滚动，tab栏切换
          })
          setTimeout(function(){    //定时器
            self.setData({
              toView: e.target.dataset.id,
              curIndex: e.target.dataset.index
            })
          },0)
          setTimeout(function () {
            self.setData({
              isScroll: false
            })
          },1)
            
        }
        
    })

之后在wxss设置自己想要的样式就可以啦！

## 下周开发计划 ##

打算把 社交以及配料表和更改配方界面写完，云开发暂未提上日程。