微信小程序学习用demo：我厨，tab切换，界面设计（适用1230-白红宇

强烈建议你试试无所不能的chatGPT，快点击我

微信小程序学习用demo：我厨，tab切换，界面设计（适用1230

阅读量：4085 次

发布时间：2019-05-25

本文共 1868 字，大约阅读时间需要 6 分钟。

点评：适合新手学习使用，本demo前半部分是我厨的界面部分，后半部分是一个练习页面；

代码示例：

[HTML]

纯文本查看

复制代码

                                     
<
scroll-view
 scroll-y
=
"true"
 style
=
"height: 750px;"
 bindscrolltoupper
=
"upper"
 bindscrolltolower
=
"lower"
 bindscroll
=
"scroll"
 scroll-into-view
=
"{ 
{toView}}"
 scroll-top
=
"{ 
{scrollTop}}"
 upper-threshold
=
"10"
 lower-threshold
=
"5"
>
  
<
view
 class
=
"homePage"
>
<!--//首页的轮播图-->
    
<
swiper
 class
=
"home_swiper"
 indicator-dots
=
"{ 
{indicatorDots}}"
 autoplay
=
"{ 
{autoplay}}"
 interval
=
"{ 
{interval}}"
 duration
=
"{ 
{duration}}"
>
      
<
block
 wx:for
=
"{ 
{carousels}}"
>
        
<
swiper-item
>
          
<
image
 src
=
"{ 
{item.picUrl}}"
 />
        
</
swiper-item
>
      
</
block
>
    
</
swiper
>
<!--//首页推荐类型-->
    
<
view
 class
=
"recommendedContent"
>
      
<
block
 wx:for
=
"{ 
{recommendeds}}"
>
        
<
image
 src
=
"{ 
{item.imgUrl}}"
 />
      
</
block
>
    
</
view
>
<!--//首页货架-->
    
<
view
 class
=
"home_Goods"
>
      
<
block
 wx:for
=
"{ 
{acts}}"
>
        
<
block
 wx:if
=
"{ 
{item.templateType==4 ? true : false}}"
>
          
<
import
 src
=
"templates/indexCell.wxml"
 />
          
<
template
 is
=
"homePagePageType4"
 data
=
"{ 
{commonItems:item.items}}"
 />
        
</
block
>
        
<
block
 wx:if
=
"{ 
{item.templateType==5 ? true : false}}"
>
          
<
import
 src
=
"templates/indexCell.wxml"
 />
          
<
template
 is
=
"homePagePageType5"
 data
=
"{ 
{commonItems:item.items}}"
 />
        
</
block
>
        
<
block
 wx:if
=
"{ 
{item.templateType==6 ? true : false}}"
>
          
<
import
 src
=
"templates/indexCell.wxml"
 />
          
<
template
 is
=
"homePagePageType6"
 data
=
"{ 
{commonItems:item.items}}"
 />
        
</
block
>
        
<
block
 wx:if
=
"{ 
{item.templateType==7 ? true : false}}"
>
          
<
import
 src
=
"templates/indexCell.wxml"
 />
          
<
template
 is
=
"homePagePageType7"
 data
=
"{ 
{commonItems:item.items}}"
 />
        
</
block
>
      
</
block
>
    
</
view
>
  
</
view
>
</
scroll-view
>
            
          

项目地址及下载：

本帖隐藏的内容

https://github.com/hellowdw/weixin_wochu

(123.45 KB, 下载次数: 71)

转载地址：http://inhni.baihongyu.com/

你可能感兴趣的文章

websocket学习和群聊实现

React Hooks 实用指南

Nuxt.js开启SSR渲染

React之组件化

关于 ES6 中 Promise 的面试题

Mobx 我的理解

JavaScript复杂判断的更优雅写法

react-hooks-redux

工作中常用的javascript常识

Vue.js双向绑定的实现原理

Vue.js自定义指令的用法与实例

读懂源码：一步一步实现一个 Vue

react-hooks-redux

ES6的Symbol竟然那么强大，面试中的加分点啊

理解ES6 proxy&reflection

深入理解ES6 class

react设计--他怎么知道是类组件还是函数组件

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

当前时间: 2024-09-20 10:51:59 当前IP: 18.191.240.184 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2

强烈建议你试试无所不能的CHAT-GPT，快点击我

强烈建议你试试无所不能的CHAT-GPT，快点击我