学习打卡————HTML和Wechat小程序 3

dianna9 2021-11-25 12:52:55

HTML

1.首先我们新建个 .html 文件在文件中输入下面这些代码就可以实现循环了，会比较的相对简单。代码如下：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>循环的使用</title>
    <script type="text/javascript">
        var  array1 = [1,4,2,5,7,8];
        //遍历数据 利用下标的变化
        for(var i=0;i<array1.length;i++){
            document.write(array1[i]+"<br/>");
        }
        //for in循环
        //数组的下标，从0到最后一个
        for(var j in  array1){
            document.write(j+"<br/>");
        }
        //语句块{}
        {
            var num = 2;
        }
        document.write(num+"<br/>");
 </script>
</head>
<body>
</body>
</html>

在代码中我们通过生成数组数据，在使用for循环进行遍历，我们来看下结果；截图如下：

我们看到在结果中数组按照for循环生成一组数据。说明我们的循环语句成功了。

1、while循环：

语法：while(条件表达式) { 语句... }；

 while(条件表达式){
                语句...
            }

执行流程：while语句在执行时，先对条件表达式进行求值判断，如果值为true，则执行循环体，循环体执行完毕以后，继续对表达式进行判断如果为true，则继续执行循环体，以此类推如果值为false，则终止循环

2、do...while循环：

语法：do{ 语句... } while(条件表达式)；

do{

语句...

}while(条件表达式)

执行流程：do...while语句在执行时，会先执行循环体，循环体执行完毕以后，在对while后的条件表达式进行判断，如果结果为true，则继续执行循环体，执行完毕继续判断以此类推如果结果为false，则终止循环实际上这两个语句功能类似，不同的是while是先判断后执行，而do...while会先执行后判断，do...while可以保证循环体至少执行一次，而while不能

3、for循环：

在for循环中，为我们提供了专门的位置用来放三个表达式：初始化表达式、条件表达式、更新表达式。

语法： for(初始化表达式、条件表达式、更新表达式){ 语句... }；

 for(初始化表达式;条件表达式;更新表达式){
                语句...
            }

执行流程：执行初始化表达式，初始化变量（初始化表达式只会执行一次）、执行条件表达式，判断是否执行循环。如果为true，则执行循环；如果为false，终止循环；执行更新表达式，更新表达式执行完毕继续重复。

4、循环嵌套：

在我们使用循环的使用是可以互相嵌套的，我们来看下代码：

window.onload = function(){
     var oList = document.getElementById('list01');
     var aLi = oList.getElementsByTagName('li');
     for (var i = 0; i < aLi.length; i++) {
         if(i % 2 == 0){
             aLi[i].style.background = 'gold';
         }
     }
     for(var j in aLi){
         aLi[j].style.background = 'red';
     }
     //创建一个循环，往往需要三个步骤
     //1.创初始化一个变量
     var j = 0;
     //2.在循环中设置一个条件表达式
     while(j < aLi.length){
         aLi[j].style.background = 'gold';
         //3.定义一个更新表达式，每次更新初始化变量
         j++;
     }

Wechat小程序模仿微信发现页面

1、flex布局

删除所有不必要的代码在app.json 中更改配置文件：

navigationBarBackgroundColor 更改导航栏的背景色为黑色；
navigationBarTitleText 更改导航标题为 “发现”。

{
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "navigationBarBackgroundColor": "#000000",
        "navigationBarTitleText": "发现"
      },
    "sitemapLocation": "sitemap.json"
}

效果如下：

编写view 中的内容：要得到如下的效果，需要在一个大的view里面再嵌套一个小的view，小的view中图片，文字，箭头按从左到右分布

.listGroup{
  background-color: white;
  margin: 20rpx 0;
}

.listItem{
  display: flex;
  flex-direction: row;
  border: 1rpx solid silver;
  padding: 10rpx;
}

接着点击文件夹新建按钮在页面中新建一个文件夹，命名为image；再把素材给拖进image 文件夹里

随后我们在 index.wxml 中给 image 标签添加图片来源：

<view class="container">
  <view class="listGroup">
    <view class="listItem">
      <image src="/pages/image/moments.png"></image>
      <text>朋友圈</text>
      <image src="/pages/image/arrow.png"></image>
    </view>
  </view>  
</view>

这个时候发现图片过大，我们在样式文件 index.wxss 对 image 添加样式，限制image 大小：

image{
  width: 80rpx;
  height: 80rpx;
  margin: 0 15rpx;
}

2、循环创建栏目

在index.js 中创建数据，使前端栏目可以动态创建。
此时点击 index.js 在 Page 中编写数据：


data:{
  list:[
    [
      {text:'朋友圈',icon:'/pages/image/moments.png'}
    ],
    [
      {text:'扫一扫',icon:'/pages/image/scan.png'},
      {text:'摇一摇',icon:'/pages/image/shake.png'}
    ],
    [
      {text:'搜一搜',icon:'/pages/image/sreach.png'},
      {text:'搜一搜',icon:'/pages/image/sreach.png'}
    ],
    [
      {text:'购物',icon:'/pages/image/shop.png'},
      {text:'游戏',icon:'/pages/image/games.png'}
    ],
    [
      {text:'小程序',icon:'/pages/image/minip.png'}
    ]
  ]
}

接着在index.wxml使用for循环添加顺序

<view class="container">
  <view class="listGroup" wx:for="{{list}}" wx:for-item='value' wx:key="value{{index}}">
    <view class="listItem">
      <image src="/pages/image/moments.png"></image>
      <text>朋友圈</text>
      <image src="/pages/image/arrow.png"></image>
    </view>
  </view>  
</view>

效果如下：

最后为这些元素添加上值：

<view class="container">
  <view class="listGroup" wx:for="{{list}}" wx:for-item='value' wx:key="value{{index}}">
    <view class="listItem" wx:for="{{value}}" wx:for-item='value1' wx:key="value1{{index}}">
      <image src="{{value1.icon}}"></image>
      <text>{{value1.text}}</text>
      <image src="/pages/image/arrow.png"></image>
    </view>
  </view>  
</view>

如果有加了for 循环的数据显示不出来图片的，那就是路径问题或者标点符号打错了。

...全文

255 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

陈小春学安全 2023-01-02

打赏
举报

很不错的内容，干货满满，已支持师傅，期望师傅能输出更多干货，并强烈给师傅五星好评

另外，如果可以的话，期待师傅能给正在参加年度博客之星评选的我一个五星好评，您的五星好评都是对我的支持与鼓励（帖子中有大额红包惊喜哟，不要忘记评了五星后领红包哟）
⭐ ⭐ ⭐ ⭐ ⭐ 博主信息⭐ ⭐ ⭐ ⭐ ⭐
博主：橙留香Park
本人原力等级：5
链接直达：https://bbs.csdn.net/topics/611387568
微信直达：Blue_Team_Park
⭐ ⭐ ⭐ ⭐ ⭐ 五星必回！！！⭐ ⭐ ⭐ ⭐ ⭐

点赞五星好评回馈小福利：抽奖赠书 | 总价值200元，书由君自行挑选（从此页面参与抽奖的同学，只需五星好评后，参与抽奖）