小程序基础2（数据缓存与scroll-view）

数据缓存

<!--pages/storage/storage.wxml-->
<view>
    <text>用户名：</text>
    <input class="input-sty" type="text" value="{{userInputVal}}" 
    placeholder="请输入用户名" bindinput="userInputFn" />
</view>
<view>
    <text space="emsp">密 码：</text>
    <input class="input-sty" type="password" value="{{pwdInputVal}}"
    placeholder="请输入密码" bindinput="pwdInputFn" />
</view>
<button type="primary" size="mini" plain bindtap="submitFn">提交</button>
<button type="primary" size="mini" plain bindtap="showFn">查看</button>
<button type="primary" size="mini" plain bindtap="delPwdFn">删除密码</button>
<button type="primary" size="mini" plain bindtap="delAllFn">删除全部</button>
<view>
    本地存储的数据
    <view>
        <text>用户名：</text>{{username}}
    </view>
    <view>
        <text space="emsp">密 码：</text>{{password}}
    </view>
</view>

/* pages/storage/storage.wxss */
.input-sty{
    width: 450rpx;
    border: 1px solid #f2f2f2;
    display: inline-block;
    vertical-align: middle;
}
button{
    margin-right: 5px;
}

// pages/storage/storage.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        userInputVal:'',
        pwdInputVal:'',
        username:'',
        password:''
    },
    userInputFn(e){
        this.setData({
            userInputVal:e.detail.value
        })
    },
    pwdInputFn(e){
        this.setData({
            pwdInputVal:e.detail.value
        })
    },
    submitFn(){
        wx.setStorageSync('username',this.data.userInputVal);
        wx.setStorageSync('password',this.data.pwdInputVal)
    },
    showFn(){
        this.setData({
            username:wx.getStorageSync('username'),
            password:wx.getStorageSync('password')
        })
    },
    delPwdFn(){
        wx.removeStorageSync('password');
        this.setData({
            password:'密码不存在或已被删除'
        })
    },
    delAllFn(){
        wx.clearStorageSync();
        this.setData({
            username:'用户名不存在或已被删除',
            password:'密码不存在或已被删除'
        })
    },

scroll-view 可滚动视图区域

<!--pages/scroll/scroll.wxml-->
<!--关键点 在于 给scroll-view设置white-space: nowrap;
    给子元素 设置display: inline-block;-->
<text class="t">横向滚动</text>
<scroll-view class="scroll-h" scroll-x="true">
    <view class="scroll-h-item {{item.flag?'active':''}}" 
    data-i="{{index}}" wx:for="{{list}}" wx:key="index"
    bindtap="switchFn">
        {{index + 1}}
    </view>
</scroll-view>
<text>纵向滚动</text>
<scroll-view class="scroll-z" scroll-y="true">
    <view class="scroll-z-item {{item.flag?'active':''}}" 
    data-i="{{index}}" wx:for="{{list2}}" wx:key="index"
    bindtap="switchFn2">
        {{index + 1}}
    </view>
</scroll-view>

/* pages/scroll/scroll.wxss */
.t{
    line-height: 22px;
}
.scroll-h{
    width: 750rpx;
    white-space: nowrap;
}
.scroll-z{
    width: 250rpx;
    height: calc(100vh - 44px - 250rpx);
}
.scroll-h-item{
    width: 250rpx;
    line-height: 250rpx;
    text-align: center;
    font-size: 24px;
    background-color: skyblue;
    display: inline-block;
    border-right: 1px solid #f2f2f2;
}
.scroll-z-item{
    width: 250rpx;
    line-height: 250rpx;
    text-align: center;
    font-size: 24px;
    background-color: rgb(57, 120, 145);
    border-bottom: 1px solid #f2f2f2;
}
.active{
    color: #fff;
    background-color: pink;
}

// pages/scroll/scroll.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        list:[{
            flag:true
        },{
            flag:false
        },{
            flag:false
        },{
            flag:false
        },{
            flag:false
        }],
        list2:[{
            flag:true
        },{
            flag:false
        },{
            flag:false
        },{
            flag:false
        },{
            flag:false
        }]
    },
    switchFn(e){
        let {currentTarget:{dataset:{i}}}=e;
        this.data.list.forEach(r=>{
            r.flag = false
        })
        this.data.list[i].flag = true;
        this.setData({
            list:this.data.list
        })
    },
    switchFn2(e){
        let {currentTarget:{dataset:{i}}}=e;
        this.data.list2.forEach(r=>{
            r.flag = false
        })
        this.data.list2[i].flag = true;
        this.setData({
            list2:this.data.list2
        })
    },