微信小程序前端设计,以北京动物园为例

<view class="navbar">
 <label
   wx:for="{{navbar}}"
   wx:key="unique"
   data-idx="{{index}}"
   class="item {{currentTab==index ? 'active' : ''}}"
   bindtap="navbarTap"
   >
   {{item}}
 </label>
</view>
<view class="fzxphoto"><image src="../../images/feizhouxiang.png"></image></view>
<view class="xiang">
     非洲象分布于非洲中部、东部和南部。非洲象是现存最大的陆生哺乳动物，它的体长6一7.5米，尾长1—1.3米，肩高3一4米，体重5一7.5吨。目前最高大的纪录为一只雄性非洲象，体全长10.67米，前足围1.8米，体重11.75吨。最大的象牙纪录为长350厘米，重约107公斤。
</view>
<view class="xiang">
     它们生活在从海平面至海拔5000米的热带森林、从林和草原地带。大象是游牧动物，它知道哪里有新鲜的水和新的草原,它的记忆力非常好，在非洲作为头领大象可以带领象群找到上千公里以外的水源。同时这样也引导了其它的动物寻找水源，所以大象又是很多动物的偶像和追随者。
</view>
<view class="xiang">
     大象的记忆力好，身强体壮但性格上可是个小心眼了。在我们动物园，有一天一只大象肠胃不舒服,我们的饲养员就把药片放到了他最喜欢的苹果里喂给它吃,第一次他不小心都吃了，第二次再放的时候,大象就不上当了,用脚轻轻把药片给挤出来,只把苹果给吃了，然后抬起头冲饲养员大吼了一声，好像在说“谁让你骗我吃药啊”。来宣泄着自己不满,而且以后每次见到那位饲养员时，它都会用鼻子钩一下，嘿!还记仇那。
</view>
<view class="xiang">
     大象与我们人类—样，有着复杂的情感。在象群中，如果有刚出生的小象,其它的大象都会用鼻子来帮助它站立起来。并且给与它无微不致的照顾，还会教它各种生存技能。在象群中如果有哪位成员出现危险，其它的同伴会马上会前去营救表现的非常团结协作。现在亚洲象是国家的一类保护动物。
</view>
<view class="xiang">
     一提到大象我们马上就会想到它那长长的鼻子。您知道吗?它的大鼻子里有十多万块活动的肌肉哪，而我们人类整个身体全部算起来只有600多块肌肉，他的肌肉数量是我们人类的160多倍。难怪说鼻子是大象最有力的武器了。当遇到敌害的时候,它会用鼻子把对方卷起来，然后狠狠的甩出去。对于大象来说，鼻子是它身上“举足轻重”的器官，大象靠着它呼吸和取食喝水，大象的嗅觉灵敏在顺风的时候可以闻到80米以外的气味。
</view>
<view class="xiang">
     在它鼻孔开口的末端,有指状突起，就像我们人类手指一样，能够帮助它拾拣细物。我们平常看到大象吃草、采摘树叶、果实等都是用鼻子完成的。曾经有人做过这样的试验，看大象的鼻子究竟能拿起多么细小的东西，结果大象可以拿起我们缝纫用的针，可见大象的鼻子是多么的灵巧啊!除此以外,它的长鼻还能用来喝水和洗澡。一只成年的大象，一次可以用鼻子吸取十几公斤的水。相当于我们常见的一大桶桶装水还要多，就算是这样，大象想喝饱了还得喝上十次才算差不多。
</view>

.container{
   display: flex;
   flex-direction: column;
   align-items: center;
}
.fzxphoto{
   text-align: center;
   /* margin-top: 100%; */
}
.xiang{
   margin-top: 50rpx;
   font-size: 32rpx;
   text-indent: 2em;
   display: flex;
}
.navbar{
   flex: none;
   display: flex;
   background: #fff;
 }
 .navbar .item{
   position: relative;
   flex: auto;
   text-align: center;
   line-height: 80rpx;
 }
 .navbar .item.active{
   color: #FFCC00;
 }
page{
   height: 135%;
   background-color:#ffffff;
}

{
   "pages": [
       "pages/webs/webs"
   ],
   "window": {
       "navigationBarBackgroundColor": "#ffff",
       "navigationBarTitleText": "北京动物园",
       "navigationBarTextStyle": "black"
   },
   "sitemapLocation": "sitemap.json"
}